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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.