How to Add Foundation Icons to Zurb Foundation for Applications

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!

4 thoughts on “How to Add Foundation Icons to Zurb Foundation for Applications

  1. Pretty cool! It looks similar in function, purpose and implementation to FontAwesome. Is it, or am I missing something? Bonus? Additional? Different somehow?

    1. Correct, it’s pretty much the same as Font Awesome. I think they wanted to take their own crack at it when it was released, as part of the slew of designer resources they offer.

What are your 10 bits on the matter? I want to know!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s