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

As clearly as it is given, to include a glyspicon icon inside our web page, Span element should be done, as here:

  & lt; Span class = "glyphicon glyphicon-search" & gt; & Lt; / Span & gt;  

How, we have some files in .ai format, which can be changed in any format of choice (.jpg, .png, .svg, etc ...).

I want to know how it has been implemented, which formats are in the file, JS and / or CSS code to be included in addition to the HTML code.

Looking at the source of the bootstrap page, they did this by making the icon a font, Suggest to use because it's easy and compact way to do this. You can use a font editor like this:

It seems that this is a great support for uploading SVG so that you can make your own fonts.

You can then import your font like CSS:

  @ font-face {font-family: 'my-vector-font'; Src: url ('my-vector-font.eot'); Source: 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:

  .icon-1: first {font-family: 'my-vector-font '; Content: "{CHARACTER_FOR_ICON}"; }  

You can make that selector with padding, etc. As you need.