Home > Developer > Web Develop
Font-awesome is a large library of vector icons, with most IT company logos and small icons commonly used, to easily add icons on a Web page by using the CSS style set provided by Font-awesome. Because of the font icon, the text-related label reference is used, and the magnification is not distorted. However, unlike fonts, there is no italic or bold effect when using a <i> tag or a <b> tag, but the <u> tag has an underscore effect. Find the name of icon on the Font-awesome website, add classes to the referenced elements: FA and Fa-icon names, and you can see these two classes in the downloaded style set:
. FA {
? ? Display:inline-block;
? ? Font:normal normal normal 14PX/1 fontawesome;
? ? Font-size:inherit;
? ? Text-rendering:auto;
? ? -webkit-font-smoothing:antialiased;
? ? -moz-osx-font-smoothing:grayscale;
? ? Transform:translate (0, 0);
}
The icon class is represented in the specific content code.
Also in Font-awesome.css, you can see that some of the extended classes can be reused, such as. pull-right,.pull-left,.fa-ratote-90, and so on.
<! DOCTYPE html>
? ? ? ? ? ? ? ? <meta charset= "UTF-8" >
? ? ? ? <title>font-awesome test</title>
? ? ? ? <link rel= "stylesheet" href= "Css/font-awesome.min.css" >
? ? ? ? <body>
? ? ? ? <p class= "fa fa-2x fa-cart-plus" ></p>
? ? ? ? <i class= "fa fa-border fa-cart-plus" ></i>
? ? ? ? <b class= "fa fa-rotate-90 fa-cart-plus" ></b>
? ? ? ? <u class= "fa fa-pull-right fa-cart-plus" ></u>
? ? ? ? <em class= "fa pull-right fa-cart-plus" ></em>
? ? </body>
The above pages are displayed as:
?You can see that the <i><b><em> and other labels do not respond to the effect,<u> labels are underlined below the icon.
Because you use icons as fonts, you also need to use font-related properties to set them when included in other blocks:
<! DOCTYPE html>
?? <meta charset= "UTF-8";
?? <title> Font-awesome test</title>
?? <link rel= "stylesheet" href= "css/font-awesome.min.css";
?? <style ? ? ? ? height:100px;
?????? border-radius:50%;
?????? text-align:center;
?????? line-height:100px;
????}
</style>
<body>
<div class= "icon";
?? <p class= "FA fa-2x Fa-cart-plus "></P>
</div>
<div>
?? <i class=" fa fa-border fa-cart-plus "></i
? <b class= "fa fa-rotate-90 fa-cart-plus" ></B>
?? <b class= "FA fa-pull-right Fa-cart-plus" & Gt;</b>,
? <em class= "fa pull-right fa-cart-plus" ></EM>
</div>
</body>
?
As shown above, you can change its color, center, line higher and font-related attributes, note that fa-2x set the FONT-SIZE:2EM, so if the div is too small, there will be a case of wrapping.
Web Learning note _04_font-awesome font icon
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
