Related readings:
Detailed explanation of Bootstrap glyphicons font icon
Let me tell you what font icons are?
Font icons are icon fonts used in web projects. Although Glyphicons Halflings requires a commercial license, you can use these icons for free with a project-based Bootstrap.
To express your gratitude to the icon author, I hope you will add a link to the GLYPHICONS website when using it.
I've been using bootstrap for a long time, and the built-in glyphics icon is enough to meet the needs of small projects. You only need to use one style to bring up the icon. Although it feels amazing, I have never analyzed how it implemented it. After locating the corresponding electro through Chrome developer tools, I learned that he is using CSS pseudo-element technology.
<span></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 a subclass defined by another class, such as: glyphicon-eur:before
.glyphicon-eur:before, .glyphicon-euro:before{content: "/20ac";}Looking through the document, I found that in addition to :before (CSS2 implementation: add content before the element), there are :first-letter (CSS1 implementation, add special styles to the first letter of the text, valid when the display is set to block), :first-line (CSS1 implementation, add special styles to the first line of the text, valid when the display is set to block), and :after (CSS2 implementation: add content after the element).
Once you understand the principle, the code will be simple. The specific code is as follows:
<!doctype html><head lang="zh-CN"><head><meta charset="GB2312"><title>DEMO of miaoqiyuan.cn</title><style type="text/css">body{background:#CCC;font-family:'Microsoft Yahei';}.container{background:#FFF;width:800px;margin:50px auto;border:solid 1px #0096D7;border-radius:10px;}.container h2{font-size:16px;font-width:200;color:#FFF;background:#0096D7;margin:0;padding:5px 15px;}.container h2 a{color:#FFF;}.container ul{list-style:none;padding:0;margin:0;}ul.me{padding:5px;}ul.me li{margin:5px 10px;background:#EEE;height:40px;line-height:40px;text-indent:5px;border:solid 1px #DDD;border-radius:10px;}.font-icon:before,.font-icon:after{font-family:'Impact';font-size:16px;color:#0096D7;padding:4px 6px;background:#CDF;border:solid 1px #0096D7;border-radius:10px;margin-right:5px;}/* Pseudo-elements have no effect on element style*/.font-icon{color:#090;font-family:'Airal';}.web:before{content:'Home';}.qq:before{content:'QQ';}.wechat:before{content:'WeChat';color:#090;border-color:#090;background:#99F760;}.chat:bef ore{color:#C00;}h2:first-letter{font-size:20px;color:#C00;}.chat:after{content:'ChatMe!';background:#FDC;color:#D76900;border-color:#D76900;margin-left:5px;}</style></head><body><div><h2> test page, clear reference: <a href="http://www.miaoqiyuan.cn/p/bootstrap-glyphicons-font-how-to-achieve/">bootstrap glyphicons font implementation method</a></h2><div><ul><!-- glyphicons method--><li><span></span> http://www.miaoqiyuan.cn/</li><!-- Put the effect inside--><li><span></span> mqycn2 </li><!-- Glyphicons method--><li><span>77068320 1301425789 </span> <span></span><!-- Put the effect in the internals--><li><span></span> mqycn2 </li><!-- Glyphicons method--><li><span>77068320 1301425789 </span> <span></span><!-- Put the effect in the internals--><li><span></span> mqycn2 </li><!-- Put the front and back of the glyphicons method--><li><span>77068320 1301425789 </span> <span></span><!-- Put the effect in the internals--><li><span></span><!-- Put the front and back of the glyphicons method--><li><span>77068320 1301425789 </span> <span></span></li><!-- Put the front and back of the glyphicons method--><li><span>77068320 1301425789 </span> <span></span></li><!-- Put the effect in the internals- Put the internal effect and style overlay, just like the normal style. The latter setting will also overwrite the previous setting--><li><span>mqycn2</span></li></ul></div></div></body></html>The BootStrap glyphicons font icon implementation method that the editor introduced to you is over. If you have any questions, please leave me a message. The editor will reply to everyone in time!