(ii) Bootstrap third-party extended font awesome--usage

I. GENERAL usage

The general usage of the font awesome is the same as the icon in the bootstrap, just apply the appropriate style to the inline element. Such as

<1 class= "Icon-camera-retro" ></i>

The difference is that for all the icons, font awesome provides 4 styles for the size of the settings, respectively:. Icon-large,. icon-2x, Icon-3x, and. Icon-4x, which are mostly scaled to the corresponding multiples of the icon.

<p><i class= "Icon-carmera-retro icon-large" ></i> magnification 1 time x <p>;

<p><i class= "Icon-carmera-retro icon-2x" ></i> magnification twice x <p>;

<p><i class= "Icon-carmera-retro icon-3x" ></i> magnification 3 times x <p>;

<p><i class= "Icon-carmera-retro icon-4x" ></i> magnification 4 times x <p>;

The icon set also supports the left and right floating functions in bootstrap: Pull-left, Pull-right. Use the following:

<i class= "Icon-quote-left icon-4x pull-left icon-muted" ></i>;

The use of the icon style on other elements (such as buttons, links, or add-on) is consistent with the Glyphicon style usage provided by bootstrap, and can be used together

Second, the list of icons

Often using numbers (or dots) to display the list Li element's interface is already too old, Font-awesome provides a delightful new feature, the custom icon is displayed as an identifier of the LI element, the Icon-ul and Icon-li are applied on the UL and Li elements respectively. Examples are as follows:

<ul class= "Icon-ul" >

<li class= "Icon-li icon-ok" >butteted lists (like this one) </li>

<li class= "Icon-li icon-ok" >Buttons</li>

<li class= "Icon-li icon-ok" >button groups</li>

<li class= "Icon-li icon-ok" >Navigation</li>

<li class= "Icon-li icon-ok" >prepended form inputs</li>

<li class= "Icon-li icon-ok" >...and many more with custom css</li>

</ul>

(ii) Bootstrap third-party extended font awesome--usage