Why the bootstrap icon cannot be displayed

If you do not pay attention to the specifications of CSS and fonts introduced by bootstrap, it may cause bootstrap to be unable to display the glyphicon icon normally and display it as a box.

After I found that it could not be displayed, I used the address on goole cdn to import the bootstrap file and found that it could be displayed normally. So the problem should occur in the imported file.
ctrl Left click to enter glyphyicon and find that the implemented code is like this: (Recommended learning: 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;
}

You will find the @font-face part in the idea It reports red and prompts can not resolve files glyphicons-halflings-regular.eot and glyphicons-halflings-regular.eot, which means the files cannot be found.

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

So the glyphyicon style must be associated with files such as glyphicons-halflings-regular.eot before it can be used normally. Usually the error occurs because the path is incorrect.

After analyzing so much, it means that the implementation of the font icon style needs to be associated with glyphyicon related files. When you introduce the bootstrap.css file, you must ensure that it is related to bootstrap.css The relative path allows him to find these associated files, and the official CDN server is like this, so that the icon can be displayed normally.

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of Why the bootstrap icon cannot be displayed. For more information, please follow other related articles on the PHP Chinese website!