Shulou(Shulou.com)06/01 Report--

This article mainly explains "what is the concept of bootstrap icon". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the concept of bootstrap icon"?

What is the bootstrap icon?

The icon in the bootstrap frame is the font icon, and you need to load the font through the @ font-face property.

@ font-face {font-family: 'Glyphicons Halflings';src: url ('.. / fonts/glyphicons-halflings-regular.eot') Src: url ('.. / fonts/glyphicons-halflings-regular.eot?#iefix') format ('embedded-opentype'), url ('.. / fonts/glyphicons-halflings-regular.woff') format ('woff'), url ('.. / fonts/glyphicons-halflings-regular.ttf') format ('truetype'), url ('.. / fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format ('svg');}

After customizing the font, you need to set the style for icon. Add the glyphicon class name to the element in bootstrap, and then call the corresponding icon encoding through the content attribute of the pseudo element: before.

.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;} so far, I believe you have a better understanding of "what is the concept of glyphicon", you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.