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> Home</a>
<a class= "List-group-item" href= "#" ><i class= "fa fa-book fa-fw" ></i> Library</a>
<a class= "List-group-item" href= "#" ><i class= "fa fa-pencil fa-fw" ></i> Applications</a>
<a class= "List-group-item" href= "#" ><i class= "fa fa-cog fa-fw" ></i> 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
