How to Apply Font Awesome vector Font icons

Font Awesome is a setTwitter bootupDesigned icon font library. This set of icon fonts contains almost all the icons that may be used on the webpage. In addition to the default icons of Twitter bootup, there are also social network icons,WebApplication icons and editor Icons can be used for commercial projects for free.

You can go to the official site to view more detailed information and use cases.

Follow these steps:

1. download the latest Font Awesome from the official website.

There are five in fonts, as shown below:

3. Introduce the style file to the html or other types of pages to be used, as follows:

<link href="css/font-awesome.css" rel="stylesheet" />

4.20.font-awesome.css file. If the compressed version is referenced, check the file. The first style is defined as follows when you open the file:

@font-face {  font-family: 'FontAwesome';  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');  font-weight: normal;  font-style: normal;}

 

Make sure that the path in src: url () matches the actual path direction of the current project.

4. Add the corresponding html elements to the page, and specify a style for the elements that need to add vector icons according to the style defined by font awesome. :

<div class="list-group">        <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>        <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>        <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>        <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>    </div>    <i class="fa fa-spinner fa-spin"></i>    <i class="fa fa-circle-o-notch fa-spin"></i>    <i class="fa fa-refresh fa-spin"></i>    <i class="fa fa-cog fa-spin"></i>    <i class="fa fa-car"></i>    <i class="fa fa-car fa-3x"></i>

In addition, the combination of font awesome and BootStrap can achieve better results.

The above html works as follows:

 

Test demo: Download