BootStrap glyphicons font icon implementation method, glyphicons font icon

BootStrap glyphicons font icon implementation method, glyphicons font icon

Related reading:

Bootstrap glyphicons font icons

What is a font icon?

Font icons are the font of icons used in Web projects. Although Glyphicons Halflings requires commercial license, you can use these icons for free through project-based Bootstrap.

In order to express your gratitude to the author of the icon, we hope that you can add a link to the GLYPHICONS website during use.

Bootstrap has been used for a long time. The built-in glyphicons icon is sufficient to meet the needs of small projects. You only need to use a style to call up the icon. Although it was amazing, he never analyzed how he implemented it. After locating the corresponding elment through the Chrome developer tool, he learned that he was using the CSS pseudo element technology.

<span class="glyphicons glyphicon-eur"></span>

. Glyphicons defines the font styles of all glyphicons icons.

.glyphicons{position: relative;top: 1px;display: inline-block;font-family: 'Glyphicons Halflings';font-style: normal;font-weight: 400;line-height: 1;-webkit-font-smoothing:}

The displayed content is defined by a subclass defined by another class, such as glyphicon-eur: before.

 

.glyphicon-eur:before, .glyphicon-euro:before{content: "\20ac";}

After reading the document, we found that in addition to before (CSS2 implementation: adding content before the element), there are also: first-letter (CSS1 implementation, adding a special style to the first letter of the text, display is valid when it is set to block),: first-line (CSS1 implementation, add a special style to the first line of the text, and display is valid when it is set to block),: after (CSS2 implementation: add content after the element ).

After understanding the principles, the code is simple. The specific code is as follows:

 

<! Doctype html> 
The BootStrap glyphicons font icon implementation method introduced by the editor is over now. If you have any questions, please leave a message. The editor will reply to you in time!