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 that offsets 1px from the top, renders as Inline-block, declares a font, and prescribes Font-style and
Font-weight to normal, set 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 properties. 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------inherit 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------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> </body>
Effect:
Custom font icon in the previous example, we have already 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> </body>
for more, check the font icon to bootstrap the Official document:
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
