How to solve the problem of bootstrap icon not displaying-Bootstrap Tutorial-php.cn

How to solve the problem of bootstrap icon not displaying

藏色散人

Release： 2021-01-08 14:36:14

Original

5997 people have browsed it

The solution to the problem that the bootstrap icon is not displayed: First, put the entire bootstrap downloaded from the Internet into eclipse; then put the jQuery reference before the bootstrap reference.

How to solve the problem of bootstrap icon not displaying

The operating environment of this tutorial: Windows 7 system, bootsrap version 3.3.7. This method is suitable for all brands of computers.

Recommended: "bootstrap tutorial" "css video tutorial"

Bootstrap font icon does not display problem

Problem:

When bootstrap uses font icons, it only displays a box and does not display the icon.

Problem analysis:

The reason is that the bootstrap.css file is not correctly associated with the font file glyphicons-halflings-regular.eot.

Looking at the bootstrap.css source code, we can see:

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

Copy after login

Pay attention to the url

Solution:

Throw the entire bootstrap downloaded from the Internet into eclipse . As shown in the figure,

How to solve the problem of bootstrap icon not displaying

is referenced in the jsp page:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>bootStrap表单</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" href="js/bootstrap-3.3.7-dist/css/bootstrap.css">
<script type="text/javascript" src="js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>

Copy after login

Note: The jQuery reference must be placed before the bootstrap reference, otherwise Uncaught Error: Bootstrap's will be reported JavaScript requires jQuery error

For more programming-related knowledge, please visit:Programming Tutorial! !

The above is the detailed content of How to solve the problem of bootstrap icon not displaying. For more information, please follow other related articles on the PHP Chinese website!