I’ve been working on my prayer journal project using Zurb Foundation for Applications (Z4A) and it has been going great. One thing that is nice is that Z4A comes bundled with a small set of the Iconic icon library. These are SVG icons that are easily scalable, styled, and sized. While this was nice, the available icons was too limited for me. I’d rather use the Zurb Foundation Icon Fonts that they worked hard on, have more options, and are just as stylable. There is a tiny amount of work to integrate this with a Z4A app, and here’s how you do it.
1. Get the icons and transfer to your app
Since Z4A has a nice gulp/bower structure for front end development, but there isn’t a bower repository (at least that I found) that has the latest version of the icons. Instead, download the font icon package and extract all of the files with the name “foundation-icons” to the client/assets/scss folder within your application.
2. Reference icons in your main SCSS file
Even though the icon font was built using traditional CSS, you can still merge them in to the SCSS based styling within our Z4A app. Open the app.css file and add the following line below the existing imports statements that are already there:
@import foundation-icons.css
3. Update gulp script to copy files to build location
We need to transfer all of the icon resources (css, eot, etc.) files to the build destination since they won’t automatically be embedded in the final app.css file that is generated by gulp. Locate the “copy” task that was defined in your gulp.js file and add the following command somewhere in there:
// Add Foundation Icons gulp.src('client/assets/scss/foundation-icons.\*') .pipe(gulp.dest('./assets/css/'>))
4. Add icons and enjoy
Finally, add icons to one of your HTML templates, run your gulp build, and enjoy. For example, I’ve created a button bar at the footer of my app with markup like this:
<div class="grid-block shrink hide-for-large footer-actions"> <div class="small-12 medium-12 content"> <ul class="icon-top large-icon-left menu-bar"> <li><a ui-sref="Prayers"><i class="fi-home"></i> Prayers</a></li> <li><a ui-sref="AddPrayer"><i class="fi-plus"></i> Add Prayer</a></li> <li><a ui-sref="Groups"><i class="fi-torsos-all"></i> Groups</a></li> </ul> </div> </div>That looks like this:
There you have it! Not terribly difficult and you have a whole slew of icons at your disposal. Enjoy!