Bootstrap—解决引入本地Bootstrap文件字体图标无法显示问题

最新推荐文章于 2024-06-03 20:31:46 发布

Tiramisu_C

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量6.1w

点赞数 18

分类专栏： Bootstrap Bootstrap学习之路文章标签： Bootstrap 字体图标字体图标不显示 html

本文链接：https://blog.csdn.net/nongweiyilady/article/details/53611094

版权

Bootstrap 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

Bootstrap学习之路

17 篇文章 17 订阅

订阅专栏

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

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap字体图标</title>
    <link rel="stylesheet" href="../libs/bootstrap.css">
</head>
<body>
    <div class="container">
        <button class="btn"> <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-osx-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文件中，我是这样引用的，可能你也正在犯跟我一样的错误：

<link rel="stylesheet" href="../libs/bootstrap.css">

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

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

<link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">

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

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

Tiramisu_C

关注

18
点赞
踩
32

收藏

觉得还不错? 一键收藏
16
评论
Bootstrap—解决引入本地Bootstrap文件字体图标无法显示问题

你在使用bootstrap字体图标的时候，是否遇到引用本地Bootstrap文件无法显示字体图标，而使用CDN服务器上bootstrap却能正常显示的问题。在不能正常显示的时候，比如我要在一个按钮中使用一个√的字体图标，我的代码是这样子的： bootstrap字体图标但是他的显示却是这个样子的：网上查找
复制链接

扫一扫