引导字形图标不起作用

Posted 2023-03-15

【中文标题】引导字形图标不起作用

【英文标题】：bootstrap glyphicons are not working

【发布时间】：2017-03-25 16:14:44

【问题描述】：

我通过 NuGet 包管理器将 bootstrap.min.css 下载到了我在 Visual Studio 中的项目中，并且 glyphicons 无法正常工作（但所有其他引导功能都可以工作......）我在布局页面中引用了它： . 它不起作用。 当我写这篇文章时，它起作用了，但只有当我可以访问互联网时： 字形图标没有出现并且所有其他引导功能都可以工作的问题是什么？即使我没有连接到互联网，我也希望能够处理我的项目。 我对这一切都很陌生，我非常感谢一些帮助。

【问题讨论】：

你是否包含了来自 cdn 的 css？你有没有包括字体文件夹？你能检查一下@icon-font-path 设置是否正确吗？

你能告诉我如何以及在哪里检查吗？我对这一切都很陌生。字体文件夹在哪里？

检查@kronos99 答案

请分享代码..

【参考方案1】：

包括所有必需的字体引导文件。

演示：http://jsfiddle.net/rfehs6bg/16/

<p>
    Hello, world!!! 
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</p>

【讨论】：

我该怎么做？你能详细解释一下在哪里检查吗？我是新手。谢谢！！

包括这个引导文件 "maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">" 你也可以下载并链接到本地​​ url。转到“getbootstrap.com/components”复制并粘贴您需要的图标的类名。

【参考方案2】：

将提取的 bootstrap 文件夹保存在一个位置，并确保其中有 2 个文件夹 - css 和 fonts。字形图标位于字体文件夹内。 之后只需按照您的方式导入 css.min 即可。

【参考方案3】：

“Glyphicon”不工作的主要原因：

如果您使用的是免费的，即来自引导字体。

然后写成<i class="glyphicon glyphicon-arrow-down"></i>

没有“S”。

如果您使用付费字形图标，请将其与“s”一起使用

glyphicons glyphicons-book

希望对你有帮助！