笔记大全

bootstrap 不显示图标如何办

更新时间：2023-10-26

问题描述

在使用 Bootstrap 框架时，有时候会遇到无法显示图标的情况，该怎么办？

问题分析

在使用 Bootstrap 框架时，经常会用到如下图标：

    <i class="glyphicon glyphicon-user"></i>

但是有时候，我们会发现这些图标无法正常显示出来，如下图：

这时候，我们需要分析一下是什么原因导致图标无法显示。

通过检查 CSS 文件，我们可以发现 Bootstrap 依赖于一个名为“Glyphicons Halflings”的字体库（fonts/glyphicons-halflings-regular.ttf），而这个字体库文件并没有被正确加载。

问题解决

既然原因找到了，那么解决方案就很简单了，我们只需要确保字体库文件能够被正确加载即可。

方法一：手动添加字体文件

你可以手动下载字体库文件，并将它放置在你的项目的 fonts 目录下，并确保以下两个路径指向正确的文件：

    <link rel="stylesheet" href="/path/to/bootstrap.min.css">
    <link rel="stylesheet" href="/path/to/fonts/glyphicons-halflings-regular.ttf">

方法二：使用 CDN

如果你不想自己维护字体库文件，那么可以使用 Bootstrap 官方提供的 CDN：

    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf">

方法三：修改 CSS 文件

另一种解决方法是：修改 Bootstrap 的 CSS 文件，将其中依赖的字体文件路径改为正确的路径。

    @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');
    }

将以上代码中的路径改为正确的路径即可。

总结

当我们遇到无法显示 Bootstrap 图标的问题时，首先需要检查字体库文件是否被正确加载，如果没有被正确加载，就需要手动添加字体文件或使用 CDN 进行加载，或者修改 Bootstrap 的 CSS 文件中的依赖路径。

只要确保字体库文件被正确加载，就能正常显示 Bootstrap 图标了。

c语言编程笔录