Related reading:
Detailed Bootstrap glyphicons font icon
First of all, what is the font icon?
The font icon is the icon font used in a Web project. Although Glyphicons Halflings requires a commercial license, you can use these icons for free based on project Bootstrap.
To show thanks to the icon author, I would like you to add a link to the Glyphicons site when you use it.
Using bootstrap for a long time, the built-in glyphicons icon is sufficient to meet the needs of small projects. Just use one style to pull up the icon. Although the feeling is very magical, has not analyzed how he realizes, through the chrome developer tool, navigates to the corresponding elment, learned that he is uses the CSS pseudo element technology.
<span class= "Glyphicons glyphicon-eur" ></span>
. glyphicons defines the style of all glyphicons icon fonts
. 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 subclasses defined by another class, such as: Glyphicon-eur:before
. Glyphicon-eur:before,. glyphicon-euro:before{
content: "\20AC";
}
Look up the document and discover 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, which is valid when display is set to block),: First-line (CSS1 implementation, adding a special style to the first line of text, valid when display is set to block), following (CSS2 implementation: Adding content after the element).
Understand the principle, the code is simple, the specific code is as follows:
<!doctype html>
About small series to introduce the Bootstrap Glyphicons font icon implementation method to this end, if you have any questions welcome to my message, small series will promptly reply to everyone!
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
