Bootstrap 中不显示字体图标问题怎么解决?

Bootstrap 中不显示字体图标的原因是什么? 怎么解决? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.

你在使用 Bootstrap 字体图标的时候, 是否遇到引用本地 Bootstrap 文件无法显示字体图标, 而使用 CDN 服务器上 Bootstrap 却能正常显示的问题.

在不能正常显示的时候, 比如我要在一个按钮中使用一个√的字体图标, 我的代码是这样子的:

<!doctype html>
<HTML>
  
  <head>
    <meta charset="UTF-8">
    <title>
      Bootstrap 字体图标
    </title>
    <link rel="stylesheet" href="../libs/bootstrap.CSS">
  </head>
  
  <body>
    <div>
      <button>
        <span class="glyphicon glyphicon-ok">
        </span>
      </button>
    </div>
  </body>
 
</HTML>

但是他的显示却是这个样子的:

找了很多解决办法, 说法不一. 下面来看看我是如何解决的.

发现不能显示之后我使用了 goole cdn 上的地址引入 Bootstrap 文件, 发现可以正常显示. 所以问题应该出现在引入文件这里.

ctrl + 左键进入 glyphyicon, 发现实现的代码是这样的:

@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-OS X-font-smoothing: grayscale;
}

在 idea 中就会发现 @font-face 这部分报红, 提示 can not resolve file glyphicons-halflings-regular.eot 和 glyphicons-halflings-regular.eot, 意思是找不到文件.

所以 glyphyicon 这个样式, 是关联着这些文件的, 进入到下载的整个的压缩包, 进入这个文件 Bootstrap-3.3.7-dist\fonts, 就会发现如下文件:

所以 glyphyicon 这个样式, 必须要关联到 glyphicons-halflings-regular.eot 等文件才能正常使用.

而在我的引用 Bootstrap 文件中, 我是这样引用的, 可能你也正在犯跟我一样的错误:

在 webstrom 中看到我的 libs 目录是这样的:

是的, 在使用 Bootstrap 的大多样式的时候, 单单是 Bootstrap.CSS 这个文件就够了, 不必引入全部的, 这样可以让我们的项目没那么臃肿. 但是在我们使用字体图标的时候, 是需要关联到字体图标相关的文件才得以实现的, 所以当我引入整个 Bootstrap-3.3.7(您也可以部分引入, 只要将你想要的功能的相关文件全部引入且目录无误即可), 然后再在我的 HTML 中这样引入:

这样就能够正常显示字体图标:

总结: 分析了那么多, 意思就是字体图标这个样式的实现, 需要关联到 glyphyicon 相关文件, 你在引入 Bootstrap.CSS 文件时, 你要确保在与 Bootstrap.CSS 的相对路径下, 能够让他找到这些关联文件, 而 CDN 服务器上的正式如此, 如此才能让图标正常显示.

更多 Bootstrap 的相关知识, 可访问: Web 前端自学 https://www.html.cn/ !!

来源: http://www.css88.com/framework/bootstrap/18043.html

与本文相关文章

暂无,快来抢沙发吧！