Small details matter in visual design. Take icons, for example: Little graphics communicate function or meaning while taking up almost no space. But until recently, they required downloading individual graphics and adding <img> elements to your code, or background properties to CSS.

Icons are a simple way to add tiny graphics that inform users — and add that extra little something to make your products look great. Fonts are vectors, which means they'll expand to any size you need without losing resolution. And once they're installed, they a cinch to apply and style. Here's how to quickly add icons to your website or app.

By "icon font" we mean "font" as in containers, not typefaces. When we use these icons in our work, we're adding an element to mark the place where an icon will appear. We're not styling text as you would with a font stack like "font-family: helvetica, arial, sans-serif;"

So adding icons to your pages is as simple as adding a bit of code. We use the (somewhat deprecated) <i>…</i> element. "I" for "icon," in this case. Semantic? Not exactly. But easy to apply and easy to search. Here's what an icon in HTML looks like:

<i class="fi-star"></i>

The "fi-star" is a code that tells browsers which symbol in the font to place. Nothing goes between the <i> tags. See it in action with this CodePen demo.

So how do you get the fonts into your products? There are two ways: using straight CSS, and using Sass.

Option 1: Using CSS

We've made our icon font available through a CDN (an online service) so you don't have to worry about files at all. As long as people can get to the web — and hence, your products — the icons should work. Start by adding this code to your web pages' head element:

<link href='http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css' rel='stylesheet' type='text/css'>

Then use <i></i> elements as detailed above.

Option 2: Using Sass

If you're making a Sass-based product, you'll need to download the font file, and have Sass create a link to that file.

Add files to the right folder

Start by downloading the icon font file. Uncompress the .zip and put them in your project at /fonts/foundation-icons .

Add to SCSS

Next, add this code to your app.scss file.

$font-path: "../fonts/foundation-icons/foundation-icons";
@font-face {
  font-family: "foundation-icons";
  src: url("#{$font-path}.eot");
  src: url("#{$font-path}.eot?#iefix") format("embedded-opentype"),
       url("#{$font-path}.woff") format("woff"),
       url("#{$font-path}.ttf") format("truetype"),
       url("#{$font-path}.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

@import "../fonts/foundation-icons/foundation-icons.css";

Bonus: Styling with CSS

At heart, icons fonts are text. That means we can style them with CSS. Just call on their classes like you would any other element. For example:

.fi-alert {
  color: #c40;
}
.fi-paint-bucket {
  color: #fff;
    text-shadow: 0px 0px 6px #630;
}
.fi-print {
  background: #000;
	color: #eee;
	padding: 0.25rem;
	border-radius: 0.25rem;
}
.fi-star {
	color: #f90;
}
.fi-star .fi-star {
	color: #fff;
	font-size: 0.5rem;
	position: relative;
	margin-left: -0.7rem;
	top: -0.15rem;
}

And there it is: a library of icons for your product is just a few <i>'s away.

---