Foundation-Icons and Google Fonts

In the last post I outlined what the Asset Pipeline is, how it works, and why it’s important. This post I’ll explain web-fonts, icon-fonts, and how to get both to play nice on Heroku in your asset pipeline. I’m going to assume that you use Sass for your stylesheets and every one of those stylesheets have the .scss extension. So make sure you have the sass-rails gem in your Gemfile. Since Rails 3.1, new Rails projects will be already configured to use Sass. Let’s rock!

What are Web-Fonts?

Web-Fonts are fonts that don’t exist on your system, they exist on some server somewhere. They’re downloaded by a user’s browser while rendering a web-page, kinda like linking to a remote image that you don’t have saved in your local environment. Web-Fonts can slow your sites load time because they have to be requested from somewhere. Optionally you can usually download a web-font and add it to your project, if you want to maximize performance.

Integrate Web-Fonts into my app please

Google recently released this sweet Web-Font: Lily Script One. And I wanted to take it for a test drive. @import allows stylesheets to import other stylesheets, it’s basically a link. So google provides this link: @import url(http://fonts.googleapis.com/css?family=Lily+Script+One); The classic newbie(myself) mistake is to throw that to the top of the stylesheet you happen to be using for styling these icons, wrong! You want to throw that @import link into your scss manifest(applications.scss).

What are Icon-Fonts?

Icon-Fonts are just fonts! However, instead of containing letters or numbers, they contain symbols and glyphs. You can style them with CSS in the same way you style your regular text which has made them very popular on the web. Icon-Fonts have so many awesome features like easy size, color, and shadow manipulation. You basically style these icons the same way you would style Text-Fonts. I’m going to show you how to add foundation-icon-fonts-3 to your asset pipeline, but will a little shimmy-ing this technique will work for any icon-font set.

First visit the foundation-icons link above and download the whole set. You’ll get a foundation-icons folder with a bunch of files and an svg sub-folder. Copy the whole foundation-icons folder and paste it inside the assets folder of your Rails project. Change the name of the folder to “Fonts”, Rails convention. Inside your Fonts folder add .scss to your foundation-icons.css. In fact, all of your .css files should have a .scss extension. This allows you to use both css and scss syntax(like nesting) inside your stylesheet and the Sass pre-compiler works its magic.

Next, open your fondation-icons.css.scss and notice how it’s @importing a bunch of other files with funky extensions (.eot .woff .ttf). For development this will work fine but for production this will not compile properly. We need to tweak the paths to look like this:

Don’t hold me to this, but what I believe is happening is this is creating relative-path url’s for each of the files. E.g. url(/assets/fonts/foundation-icons.eot). Last thing left to do is require this file in our stylesheet manifest(application.css.scss) like so:

Honestly, I figured this last part(*=require) wasn’t necessary. The Fonts folder is in the right place and the foundation-icons.css.scss file is importing everything it needs. I tried many many different ways to make these font-icons work both on my local server in development and in production. Foundation docs discuss nothing about integrating font-icons into your asset pipeline, even though they tout how compatible their framework is with Rails. What I’m doing works both locally and on Heroku, and I really don’t feel like digging deeper into the abyss.

Enter Font-Awesome!

In Rails projects the awesomeness of font-awesome is unmatched. All you need to do is add their gem, yeah they have a gem!, to your Rails gemfile and import their icons like so:

That’s it! That simple

Leave a Reply