Iconic for Bootstrap & Foundation

Want to use Iconic in your favorite front-end frameworks? No problemo.

Intro

We are big fans of Bootstrap and Foundation and you probably are as well since you're reading this. Iconic's SVGs work beautifully with both and we also have you covered if you're looking for the simplest replacement for Bootstrap and Foundation's default icon fonts. Iconic for Bootstrap uses our icon font with modified class names to fit in more cleanly with the framework. This guide will cover how to set up and use our fonts for Bootstrap and Foundation. Check out our Iconic font guide the full skinny on our icon font and how to use it to the fullest.

Iconic for Bootstrap

Bootstrap ships with Glyphicons which consists of 200 icons on the dot. Iconic has as a similar aesthetic to Glyphicons as well as a strong amount of icon overlap. We think it serves as a great alternative solution.

Installation

CSS

  1. Edit the @font-face src rules in iconic-bootstrap.css to reflect the path to your fonts.
    @font-face {
     font-family: 'iconic-sm';
     src: url('../fonts/iconic-sm.eot');
     ...
    
  2. Add iconic-bootstrap.css after bootstrap.css like so:

    <head>
     ...
    
     <link rel="stylesheet" href="css/bootstrap.css">
     <link rel="stylesheet" href="css/iconic-bootstrap.css">
    

LESS

Bootstrap uses LESS as its default CSS preprocessor. This is how you'd integrate Iconic's stylesheet into the Boostrap build process:

  1. Copy iconic-bootstrap.less into your less directory
  2. Copy all the Iconic fonts into your fonts directory
  3. Edit less/bootstrap.less and replace glyphicons.less with iconic-bootstrap.less

If you prefer SASS, Bootstrap has a SASS port and we also provide an Iconic Bootstrap SASS stylesheet.

Usage

  1. The iconic-bootstrap stylesheets follow the same semantic markup of Bootstrap's icon system. For example, let's take Iconic's Star icon.

Our default icon font code is:

<span class="iconic" data-glyph="star" title="star" aria-hidden="true"></span>

However, in the world of Bootstrap, their semantic markup is entrely class-based.

So with iconic-bootstap.css the code for the icon above would be:

<span class="iconic iconic-star" title="star" aria-hidden="true"></span>

The one big difference between our markup and Bootstrap's is that the glyphicon class and class-prefix are replaced with iconic because, well, Iconic is not Glyphicons.

The great thing about Iconic's Bootstrap solution is that you still get all the cool sizing, alignment and transform goodies from our default font stylesheet (learn more here).

So if you wanted to use the medium brush icon at a large size and flip it horizontally, you'd use the following code.

<span class="iconic iconic-brush iconic-md iconic-size-lg iconic-flip-horizontal" title="brush" aria-hidden="true"></span>

Iconic for Foundation

Installation

Fun-fact, the default Foundation framework doesn't come with icons. They do however ship a handy icon font add-on. The icon naming and semantic implementation of Foundation's icon font differs from Bootstrap, which is why we created a collection of stylesheets specifically for Foundation.

CSS

  1. Add iconic-foundation.css after foundation.css

    <head>
     ...
    
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/foundation.css">
     <link rel="stylesheet" href="css/iconic-foundation.css">
    
  2. Make sure the @font-face src URL paths are correct.
    @font-face {
     font-family: 'iconic-sm';
     src: url('../fonts/iconic-sm.eot');
     ...
    

SASS

Foundation uses SASS as its default CSS preprocessor. This is how you'd integrate Iconic's stylesheet into the Foundation build process:

  1. Create a fonts directory in the root of the foundation project.
  2. Copy all the Iconic fonts into the newly-created fonts directory.
  3. Add iconic-foundation.scss to scss/foundation/components.
  4. Edit scss/foundation/foundation.scss and add "foundation/components/iconic-foundation" at the bottom of the imports list.

Usage

Foundation uses a single-class-approach to their icon system. So for example, if you wanted to display their star icon, you'd use the following code:

<span class="fi-star" title="star" aria-hidden="true"></span>

Note: Foundation's examples use the <i> tag, but we're more fond of the <span> tag. You can use either—we won't be offended.

We're assuming the "fi" class-prefix stands for Foundation Icon, but it could just as easily stand for Foundation Iconic, so we decided to run with it. This means that you use the same exact markup for with Iconic as you would Foundation's Icon Font (although we suggest adding the title and aria-hidden attributes). We've made the same exact efforts to match Foundation's naming conventions, so the names should be clear and intutive.

<span class="fi-brush iconic-md iconic-size-lg iconic-flip-horizontal" title="brush" aria-hidden="true"></span>

There you have it—Iconic for your favorite front-end frameworks. As a reminder, we suggest you read our general icon font guide to get the 411 on all our whiz-bang features.