As a web developer, it is inevitable to use small icons often to add a bit of vitality and diversity to your web. Like these:
and the font awesome just gives us these. So far, Font Awesome has provided more than 500 scalable vector icons and can make changes to these icons using all the features provided by CSS, including: size, color, shading, or any other supported effect. These icons basically cover the basic needs of web developers, and font awesome is constantly maintaining updates, providing new icons for developers to use.
In this, the main introduction to the Font awesome icon fonts basic use.
Go to font awesome to download its icon font, we just use the default CSS here. Reference the FONT-AWESOME.MIN.CSS to your own page.
< Head > < charset= "Utf-8"> <rel= " Stylesheet " href="./css/font-awesome.min.css "></ Head>
You can then use the font awesome to provide us with more than 500 icon fonts.
First, implement an icon that often represents the "home" of a small house.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"> <Linkrel= "stylesheet"href= "./css/font-awesome.min.css"></Head><body style= "Background-color: #DBDBDB"> <Iclass= "fa fa-home"></I>Home</Body></HTML>
Page effect:
Of course the icon size may not meet your requirements, then you can define your own size, or use the font awesome to provide several size style classes. FA-LG, fa-2x, fa-3x, fa-4x, fa-5x.
<Iclass= "fa fa-home"></I>Original Size<br> <Iclass= "fa fa-home fa-4x"></I>fa-4x<BR> <Iclass= "fa fa-home"style= "font-size:30px;"></I>Custom Size -30px
Page effect:
Of course, the color is also you can set the arbitrary.
<class= "fa fa-home fa-2x"></i> Original color <br> <class= "FA Fa-home fa-2x " style=" color: #008B00 "></i> Green Grass
Page effect:
You can also rotate the icon.
<Iclass= "fa fa-home fa-2x"></I>Original<BR> <Iclass= "fa fa-home fa-2x fa-rotate-90"></I>Fa-rotate-90<BR> <Iclass= "fa fa-home fa-2x fa-rotate-180"></I>fa-rotate-180<BR> <Iclass= "fa fa-home fa-2x fa-rotate-270"></I>fa-rotate-270<BR> <Iclass= "fa fa-home fa-2x fa-flip-horizontal"></I>Fa-flip-horizontal<BR> <Iclass= "fa fa-home fa-2x fa-flip-vertical"></I>Fa-flip-vertical<BR>
Page effect:
Font awesome provides classes for setting the fixed width of the icon (FA-FW), for list mode ( fa-ul and fa-li ), for the combination of borders and alignment (and), and for fa-ul fa-li icons, such as a blank border to add other icons. Point me in detail.
Here we highlight the use of the underlying animation. The font awesome provides Fa-spin and fa-pulse two classes for animating icons, primarily for icons that are suitable for rotation.
<Iclass= "fa fa-spinner fa-2x fa-spin"></I> <Iclass= "fa fa-circle-o-notch fa-2x fa-spin"></I> <Iclass= "fa fa-refresh fa-2x fa-spin"></I> <Iclass= "fa fa-cog fa-2x fa-spin"></I> <Iclass= "fa fa-spinner fa-2x fa-pulse"></I>
Page effect:
Of course, we can define some of our own styles to control the animation of the icons. Here we introduce our own defined CSS style my.css.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"> <Linkrel= "stylesheet"href= "./css/font-awesome.min.css"> <Linkrel= "stylesheet"href= "./css/my.css"></Head><Bodystyle= "Background-color: #DBDBDB"> <Divstyle= "padding-left:100px; padding-top:200px;"> <Iclass= "fa fa-envelope fa-2x icon-animated-vertical"></I> <Iclass= "fa fa-hand-o-right fa-2x icon-animated-hand-pointer"></I> <Iclass= "fa Fa-bell fa-2x Icon-animated-bell"></I> <Iclass= "fa fa-wrench fa-2x icon-animated-wrench"></I> </Div></Body></HTML>
Page Effects:
Here, you can define your own CSS according to your own needs. Make your web development even more cool.
The custom style in this article my.css can be downloaded here. Above.
Font awesome icon fonts app and related
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
