This chapter explains the font icon (glyphicons) and uses some examples to understand its use. Bootstrap bundles more than 200 font-style fonts. First let's understand what a font icon is.
First to introduce you to what is the font icon:
The font icon is the icon font used in a Web project. The font icon is in the downloaded Bootstrap Fonts folder.
. glyphicon {
position:relative;
top:1px;
Display:inline-block;
font-family: ' glyphicons halflings ';
-webkit-font-smoothing:antialiased;
Font-style:normal;
Font-weight:normal;
line-height:1;
-moz-osx-font-smoothing:grayscale;
}
The. Glyphicon class declares a relative position of 1px offset from the top, renders as Inline-block, declares a font, prescribes Font-style and font-weight as normal, and sets the row height to 1. In addition, the use of-webkit-font-smoothing:antialiased and-moz-osx-font-smoothing:grayscale; Get Cross-browser consistency.
About-webkit-font-smoothing and-moz-osx-font-smoothing:
-webkit-font-smoothing property. This property makes the font anti-aliasing on the page, and the font looks clearer and more comfortable to use.
none ------is better for low pixel text
subpixel-antialiased ------Default Value
antialiased ------Anti-aliasing is good
Auto
inherit ------inherits the parent element
Initial
- The moz-osx-font-smoothing attribute, where-osx-indicates that Mozilla is a rare feature enhancement for a particular operating system, is currently known for its lack of documentation:
Grayscale------anti-aliasing is good.
Auto------Default Value
Inherit------inheritance
Bootstrap provides 200 font icons, each icon corresponds to a class, in use, we only need to include Glyphicon and corresponding class.
How to use:
<! DOCTYPE html>
Use with button:
<body>
<button class= "btn btn-default" >
<span class = "Glyphicon Glyphicon-home" ></span >
</button>
<button class= "btn btn-success" >
<span class = "Glyphicon Glyphicon-home" ></span> Home
</button>
<button class= "btn btn-info" >
<span class = "Glyphicon Glyphicon-home "></span> home
</button>
<button class=" btn btn-warning ">
< span class = "Glyphicon glyphicon-home" ></span> home
</button>
<button class= "btn Btn-warning btn-lg ">
<span class =" Glyphicon glyphicon-home "></span> home
</button>
<button class= "btn btn-warning btn-sm" >
<span class = "Glyphicon Glyphicon-home" ></span> Home
</button>
Effect:
Custom font icon
In the previous example, we have actually implemented the font icon size and color customization, which is further explained here.
You can change the size of the font icon by changing the font size or button size.
You can change the color of the font icon by setting color colors, as follows:
<body>
<button class= "btn btn-success" >
<span class = "Glyphicon Glyphicon-home" ></span > Home
</button>
<button class= "btn btn-success" style= "color: #FF0000;" >
<span class = "Glyphicon glyphicon-home" ></span> home
</button>
<button class= "Btn btn-success" >
<span class = "Glyphicon glyphicon-home" style= "color: #FF0000;" ></span> Home
</button>
</body>
Effect:
As you can see, you can change the color of the font icon by changing its parent element or color of span itself.
Apply Text Shadow
<body>
<button class= "btn btn-success" >
<span class = "Glyphicon Glyphicon-home" ></span > Home
</button>
<button class= "btn btn-success btn-lg" style= "Text-shadow:black 3px 2px 3px;" >
<span class = "Glyphicon glyphicon-home" ></span> home
</button>
<button class= "Btn btn-success btn-lg" >
<span class = "Glyphicon glyphicon-home" style= "Text-shadow:black 3px 2px 3px;" ></span> Home
</button>
For more, check the font icon to bootstrap the official document:
The above content for you to introduce bootstrap Glyphicons font icon related knowledge, I hope you like.
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
