CSS3 ways to use the Font awesome fonts icon in an HTML page

Source: Internet
Author: User

One, what is the font icon

(1) Now more popular use font icon, the so-called font icon is actually a font library containing many icons. Like our common fonts, this can be understood as a special font, except that it contains icons.
(2) since it is a font, then the most convenient is to be free to change the color and size in the code without distortion. This does not require the creation of multiple pictures because of the various sizes, or the many sets of color icons used to identify different states.
(3) Whether it is a button icon or a navigation bar icon, whether it is a Web site development or mobile application development, font icon can be applied.
(for example, the following can be implemented using the font icon, such as the 111cn.net right navigation bar on the small icon with the font icon)

Two, font Awesome icon Font Library
Font Awesome is one of the most popular and most comprehensive icon font libraries available. This set of icon fonts contains almost all the icons and social networking icons, Web application icons, and editor icons that may be used in the Web page.

Website address: Official address GitHub address

The main features are as follows:

✓ A font that contains 605 icons (up to 4.5.0);
✓ Pure CSS control, can easily define the color of the icon, size, shadow and any CSS can achieve the effect;
✓ Infinite Scaling, the vector icon in any size is exactly the same;
✓ Free use, including commercial and non-commercial projects;
✓ Supports Internet Explorer 7 browsers;
✓ can be perfectly presented on the Retina screen;
✓ Simple, easy to use;
✓ is friendly to designers and can be easily used by designers.
✓ and other icon fonts, compatible with screen readers;

The following are just a few of the icons in the Font library (click here to see all):


Three, the configuration of the Font awesome
(1) First put the entire Font Library folder font-awesome into the project.
(2) Introduce the FONT-AWESOME.MIN.CSS to the head of the HTML page.
1
<link rel= "stylesheet" href= "Font-awesome/css/font-awesome.min.css" >

Four, the use of Font awesome sample
You can use the Font awesome fonts icon anywhere on the page using the <i> tab.

1, the simplest of examples

By using the FA prefix and the icon name in class, you can display the corresponding icon (inline style)


<i class= "fa Fa-camera-retro" ></i> Fa-camera-retro

2, enlarge the icon size relative to the content size

Using FA-LG, fa-2x, fa-3x, fa-4x, fa-5x style can make the icon relative to the content, size increase 33%, become twice times, 3 times times, 4 times times, 5 times times.


<i class= "fa fa-camera-retro fa-lg" ></i> fa-lg <br>
<i class= "fa fa-camera-retro fa-2x" ></i> fa-2x <br>
<i class= "fa fa-camera-retro fa-3x" ></i> fa-3x <br>
<i class= "fa fa-camera-retro fa-4x" ></i> fa-4x <br>
<i class= "fa fa-camera-retro fa-5x" ></i> fa-5x <br>
(Note: If you find that the icon is hidden from top to bottom, you can solve it by adding line-height appropriately)

3, Fixed width icon

Use FA-FW to fix icon width

<!doctype html>
<title>111cn.net</title>
<link rel= "stylesheet" href= "Font-awesome/css/font-awesome.min.css" >
<style>
. list-group {
margin-bottom:20px;
padding-left:0;
}

. list-group-item {
position:relative;
Display:block;
padding:10px 15px;
Margin-bottom: -1px;
Background-color: #ffffff;
border:1px solid #dddddd;
}

. list-group-item:first-child {
border-top-right-radius:4px;
border-top-left-radius:4px;
}

. list-group-item:last-child {
margin-bottom:0;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px;
}

A.list-group-item {
Text-decoration:none;
Color: #555555;
}

A.list-group-item:hover,
A.list-group-item:focus {
Text-decoration:none;
Color: #555555;
Background-color: #f5f5f5;
}
</style>
<body>
<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>
</body>

4, List icon

The list List default icon can be easily replaced with Fa-ul and Fa-li.

<ul class= "Fa-ul" >
<li><i class= "Fa-li fa fa-check-square" ></i>list icons</li>
<li><i class= "Fa-li fa fa-check-square" ></i>can be used</li>
<li><i class= "Fa-li fa fa-spinner fa-spin" ></i>as bullets</li>
<li><i class= "Fa-li fa fa-square" ></i>in lists</li>
</ul>

5, with a border and floating icon

Using Fa-border with Fa-pull-right or fa-pull-left, you can easily implement a reference or article icon.


<i class= "FA fa-quote-left fa-3x pull-left fa-border" ></i>...tomorrow We run faster, stretch out our arms Farther ...
And then one fine morning-so we beat on, boats against the
Current, borne back ceaselessly into the past.

6, Icon rotation animation

With Fa-spin you can rotate the icon at a constant speed, using Fa-pulse to allow the icon to rotate at only 8 angles.


<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-spinner fa-pulse" ></i>
(Note: If it is IE browser, only support IE10 and above version of IE)

7, rotate, flip icon

You can use fa-rotate-* and fa-flip-* to implement the rotation and rollover of icons, respectively.

<i class= "fa Fa-shield" ></i> normal<br>
<i class= "fa fa-shield fa-rotate-90" ></i> fa-rotate-90<br>
<i class= "fa fa-shield fa-rotate-180" ></i> fa-rotate-180<br>
<i class= "fa fa-shield fa-rotate-270" ></i> fa-rotate-270<br>
<i class= "fa fa-shield fa-flip-horizontal" ></i> fa-flip-horizontal<br>
<i class= "fa fa-shield fa-flip-vertical" ></i> fa-flip-vertical

8, overlay icon

To overlay multiple icons, use Fa-stack to set up the container. FA-STACK-1X represents the normal size of an icon, fa-stack-2x represents a larger icon. Fa-inverse lets you reverse the color of an icon.


<span class= "Fa-stack fa-lg" >
<i class= "fa fa-square-o fa-stack-2x" ></i>
<i class= "fa fa-twitter fa-stack-1x" ></i>
</span>
Fa-twitter on fa-square-o<br>
<span class= "Fa-stack fa-lg" >
<i class= "fa fa-circle fa-stack-2x" ></i>
<i class= "fa fa-flag fa-stack-1x fa-inverse" ></i>
</span>
Fa-flag on fa-circle<br>
<span class= "Fa-stack fa-lg" >
<i class= "fa fa-square fa-stack-2x" ></i>
<i class= "fa fa-terminal fa-stack-1x fa-inverse" ></i>
</span>
Fa-terminal on fa-square<br>
<span class= "Fa-stack fa-lg" >
<i class= "fa fa-camera fa-stack-1x" ></i>
<i class= "fa fa-ban fa-stack-2x" style= "color:red;" ></i>
</span>

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.