Want to use Iconic in your favorite front-end frameworks? No problemo.
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.
Edit the @font-facesrc rules in iconic-bootstrap.css to reflect the path to your fonts.
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:
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.
Iconic for Foundation
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.
Foundation uses SASS as its default CSS preprocessor. This is how you'd integrate Iconic's stylesheet into the Foundation build process:
Create a fonts directory in the root of the foundation project.
Copy all the Iconic fonts into the newly-created fonts directory.
Add iconic-foundation.scss to scss/foundation/components.
Edit scss/foundation/foundation.scss and add "foundation/components/iconic-foundation" at the bottom of the imports list.
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:
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.
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.