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

Editor to share with you why the use of bootstrap icon will not be displayed, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

If you do not pay attention to the introduction of css and fonts specifications by bootstrap, it may cause bootstrap to not display properly when displaying the glyphicon icon, which is displayed as a box.

After I found that it could not be displayed, I used the address on goole cdn to introduce the bootstrap file, and found that it could be displayed normally. So the problem should be here in the import file. Ctrl+ left-click to enter glyphyicon, and found that the implementation of the code is like this: (recommended study: Bootstrap video tutorial)

@ 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.woff2') format ('woff2'), 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') }. Glyphicon {position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

In idea, you will find the @ font-face part of the red, prompting can not resolve file glyphicons-halflings-regular.eot and glyphicons-halflings-regular.eot, which means that the file cannot be found.

So the glyphyicon style is related to these files. Enter the entire downloaded package, enter the file bootstrap-3.3.7-dist\ fonts, and you will find the following files:

Therefore, the style of glyphyicon must be associated with files such as glyphicons-halflings-regular.eot before it can be used normally. Errors are usually caused by incorrect paths.

Analyzed so much, meaning that the implementation of the font icon style needs to be associated with glyphyicon-related files, when you introduce bootstrap.css files, you have to make sure that in the relative path with bootstrap.css, you can let him find these related files, and the official on the CDN server is so, so that the icon can be displayed normally.

The above is all the contents of this article entitled "Why the icon of bootstrap cannot be displayed". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.