如何在不使用 Bootstrap CSS 的情况下包含 Glyphicons

Posted

技术标签:

【中文标题】如何在不使用 Bootstrap CSS 的情况下包含 Glyphicons【英文标题】：How to include Glyphicons without using Bootstrap CSS 【发布时间】：2016-09-23 17:15:32 【问题描述】：

我的客户项目使用了一些基本的 html 和 CSS。但他们喜欢网站菜单上的字形图标。所以我只是尝试在 Bootstrap CSS 中包含 Glyphicons，它确实如此，但是在包含 Bootstrap CSS 后其他 css 受到了影响。

所以这个问题可能很愚蠢，我只想在没有引导 css 的客户端网站菜单链接中包含 Glyphicons。

这可能吗？我知道引导程序包将提供免费的 Glyphicons。

还有一些事情是我的客户不希望我包含 Bootstrap CSS，因为它会影响页面结构。

那么是否可以在没有 Bootstrap css 或我自己的自定义 css 的情况下包含 Glyphicons？

任何帮助将不胜感激！

【问题讨论】：

替代； Font Awesone 如果您想在没有引导程序的情况下使用它，则必须购买 PRO 版本。 一定切换到fontawesome.io 据我了解，在没有 Bootstrap 的情况下使用 Glyphicons 是侵犯版权的行为。请不要这样做，请改用 Font Awesome 之类的免费替代品。 “Glyphicons 半身人通常不是免费提供的，但它们的创建者已免费为 Bootstrap 提供它们。作为感谢，我们只要求您尽可能提供返回 Glyphicons 的链接。” - getbootstrap.com/components/#glyphicons 你的问题并不傻；这么多开发人员让 Bootstrap 对标准 CSS 造成严重破坏的方式是愚蠢的！我想使用一个需要 Glyphicons 的库，但我不希望 Bootstrap 制作我的 CSS FUBAR。 Bootstrap 最好只使用具有特定类及其后代的元素，我不明白为什么这不是 Bootstrap 的工作方式。 （如果你真的希望它接管一切，只需将类添加到你的 <html> 元素！）也许我只是老了——我已经使用 CSS 20 年了，虽然我跟上了，但我仍然期望 CSS3 以某种方式工作。 【参考方案1】：

是的，您只需要从这个页面下载：http://glyphicons.com/（下面的免费选项）

编辑： 在此线程中有关此的更多信息：Bootstrap 3 Glyphicons CDN

【讨论】：

是的。但是免费版没有 css 选项，只有 png 可用。对于 CSS 版本，我需要使用 Pro 版本或 Bootstrap。谢谢。 并且不可能从引导程序中获取 css 和字体文件并且只使用它吗？我不确定这是否可行，但这是一个想法。或者你可以尝试使用 Font Awesome 就像对你说的那样 HdddnTHA【参考方案2】：

这是一个 Bower 包，您只能在整个引导程序中使用字形图标。

检查这个 github 存储库https://github.com/ohpyupi/glyphicons-only-bootstrap

或

bower install glyphicons-only-bootstrap

编辑

现在可以通过 NPM 下载包了。

npm install glyphicons-only-bootstrap

【讨论】：

因为我今天已经发表了一个粗俗的评论（见上文）：那些不发表评论就拒绝回答的人解释为什么应该被禁止使用 Stack Exchange！当他们尝试遵循这个建议时发生了什么？或者他们是否因为不使用 Bower 而无知或无情地否决了它？ 有很多人被一些东西所愚弄，只是因为它的花哨和复杂的程度。我完全同意你的看法。在 stackover 流程​​中提出问题并留下答案变得越来越棘手。我很高兴每两周有大约 400 人访问该存储库并获得他们想要的日常开发。【参考方案3】：

我试图在不安装整个 bootstrap.css 文件的情况下让 Bootstrap 的 glyphicons 工作，但到一半时工作量太大，我放弃了。相反，我遇到了Font Awesome。 Bootstrap 3 本身使用它（或曾经使用）。它被设计为独立使用，因此非常简单轻便。您所要做的就是：

    Download Font Awesome 包；

    将font-awesome.min.css复制到您的css文件夹中，并将Font Awesome字体文件夹中的所有字体文件复制到您的字体文件夹中；

    在您的 HTML 的 <head> 中包含 <link rel="stylesheet" href="path/to/css/font-awesome.min.css">；

    从icon library 中选择图标并将它们放入您的应用中，就像您使用 Bootstrap 的字形图标一样。

【讨论】：

感谢这帮了大忙！ 也许我遗漏了一些东西，但我不明白这是如何工作的。 FontAwesome 使用不同的类，所以如果您使用的库需要 GlyphIcon 类，例如<i class="glyphicon glyphicon-chevron-up"></i>，什么都不会出现。我喜欢使用 FontAwesome，但不幸的是，我想使用的第三方库需要 GlyphIcons，甚至是非 Bootstrap 版本。 （也许这是对图书馆作者的疏忽，但我正在努力解决它。） 问题是关于如何在没有 Bootstrap 其余部分的情况下使用 Bootstrap Glyphicons，而不是如何用其他东西替换它。 我认为这是一个很好的答案，对于可能出于稍微不同的原因阅读问题的人（比如我！）很有用。似乎发生了一些变化，现在字体真棒指令说将all.min.css复制到您的css目录，并将webfonts目录的内容复制到您的webfonts目录。 all.min.css 期望字体文件位于 ../webfonts 中，因此请确保它们存在（而不是上面建议的 ../fonts！）（reference - 请参阅将 Web 字体与 CSS 一起使用）【参考方案4】：

有这个：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">

但是，如果您想节省一些带宽，您可以直接从 CDN 加载字体，然后内联所需的 CSS，如下所示：

<style>
@font-face 
  font-family: 'Glyphicons Halflings';
  src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
  src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

.glyphicon 
  position: relative;
  top: 1px;
  display: inline-block;
  font: normal normal 16px/1 'Glyphicons Halflings';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-right: 4px;

/* Add icons you will be using below */
.glyphicon-fire:before 
  content: '\e104';

.glyphicon-eye-open:before 
  content: '\e105';

</style>

您可以在demo here 中看到一个示例（“美杜莎之眼”和“火之雨”菜单项）。

【讨论】：

致downvoter：如果此解决方案不适合您，请提供建设性反馈。 不是我对你投了反对票，我真的很讨厌那些没有理由就投反对票的人——该网站甚至说要发表评论！但是您的 CDN 链接仍然塞满了标准 CSS（尽管它声称要对其进行“规范化”），因此它与 Bootstrap 存在本质上相同的问题，因此并没有真正回答这个问题。但是，您在此处发布的显式 CSS 没有这个问题，这就是我最终对您的答案投赞成票的原因——谢谢！不过，我不同意它可以节省带宽。 CDN 的全部意义在于让浏览器缓存库，并减轻 Web 服务器的负载。 @MichaelScheper 感谢您的评论。这是很久以前的事了，但我想当我说“节省一些带宽”时，我的意思不是下载整个 Bootstrap 库只是为了使用图标字体，它们可以直接链接到字体。【参考方案5】：

我在使用 Bootstraps 时遇到了同样的问题，我只需要一个箭头，但添加它时搞砸了。

所以我搬到了 FontAwesome，工作得很好！

您还可以获得如下所示的 CDN：

<script src="https://use.fontawesome.com/2734t3et304.js"></script>

你需要拥有自己的！ :)

【讨论】：

这实际上与上述亚瑟的答案相同。 ***.com/a/39436226/1450294 感谢您的建议，但请查看我的评论，了解为什么我认为它没有帮助。 （我不会对您投反对票并拿走您的一个声誉点。不过，我鼓励您在编写自己的答案之前阅读其他答案，并熟悉 StackExchange 的习惯。）【参考方案6】：

转到 glyphicons 备忘单 [https://glyphicons.bootstrapcheatsheets.com/]

li:before 
font-family: "Glyphicons Halflings";
content: "\e013";
/* other code as per need*/

【讨论】：

以上是关于如何在不使用 Bootstrap CSS 的情况下包含 Glyphicons的主要内容，如果未能解决你的问题，请参考以下文章

如何在不刷新页面加载的情况下保留 jQuery 和 Bootstrap 功能？

如何在不完成 Bootstrap 中的一个步骤的情况下禁用进入下一步？

如何在不滚动iframe的情况下显示网页的“头部”？

Bootstrap modal : 在不禁用背景控件的情况下禁用背景点击关闭

Bootstrap modal : 在不禁用背景控件的情况下禁用背景点击关闭

如何在不使用 void 的情况下重新启动 CSS 动画？