Bootstrap font icon (glyphicons)

Bootstrap font icon (glyphicons)

 

Font icon:Font icons are the font of icons used in Web projects. 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;}

. Glyphicon class declares the relative position of a 1px offset from the top, which is displayed as inline-block, indicating the font, specifying the font-style and

Font-weight is normal, and the row height is set to 1. In addition, use-webkit-font-smoothing: antialiased and

-Moz-osx-font-smoothing: grayscale; achieve cross-browser consistency.

About-webkit-font-smoothing and-moz-osx-font-smoothing:

-Webkit-font-smoothing attribute. This attribute can make the font on the page more clear and comfortable.

None ------ better for low-pixel text

Subpixel-antialiased ------ Default Value

Antialiased ------ good anti-aliasing

Auto

Inherit ------ inherit the parent Element

Initial

-Moz-osx-font-smoothingAttributeAmong them,-osx-indicates that this is a rare feature enhancement that mozilla has introduced to a specific operating system. Due to the lack of documentation, the values currently known are:

Grayscale ------ good anti-aliasing

Auto ------ Default Valueinherit                         ------ Inheritance

Bootstrap provides 200 font icons, each of which corresponds to a class. In use, we only need to include the glyphicon and the corresponding class.

Usage:

Use with button:

 

Home Home Home Home Home

 

Effect:

In the previous example, we have customized the font Icon size and color. Further instructions are provided here. You can change the font Icon size by changing the font size or button size. By setting the color, you can change the font icon color as follows:

 

Home Home Home

 

Effect:

We can see that the font icon color can be changed by changing the color of its parent element or span.

Apply text shadow

 

Home Home Home

 

For more information, seeFont icon, yesOfficial bootstrap documentation: