Include vector graphics/icons as just a class in a span in HTML5?

Question

As clearly given on this bootstrap page, to include a glypicon icon inside our web page, all we have to do is mention it's class inside a span element, as done here:

<span class="glyphicon glyphicon-search"></span>

How, we have a few files in .ai format which can be converted to any format of choice (.jpg, .png, .svg, etc...).

I want to know as to how this is implemented, in what format are the files, what's the JS and/or CSS code to be included apart from the HTML code.

Answer 1

Looking at the source of the Bootstrap page, they have done this by making the icons a font. I would suggest using this method as it is a easy and compact way to do it. You can use a font editor like this: http://icomoon.io/app/#/select

It seems to have pretty decent support for uploading SVG's to it so you can make your own font.

you can then import your font in css like:

@font-face {
    font-family: 'my-vector-font';
    src: url('my-vector-font.eot');
    src: local('my-vector-font'), 
         local('my-vector-font'), 
         url('my-vector-font.ttf') format('truetype'),
         url('my-vector-font.svg#font') format('svg'); 
}

...and then use it in css like:

.icon-1:before {
    font-family: 'my-vector-font';
    content: "{CHARACTER_FOR_ICON}";
}

You can tune up that selector with padding, etc.. as you need.