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

Question

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

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

可以先这样吗？我知道 Glyphicons free 将随 Bootstrap Package 一起提供。

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

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

任何帮助，将不胜感激！

原文由 Raja 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

要么

bower install glyphicons-only-bootstrap

编辑

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

 npm install glyphicons-only-bootstrap

原文由 supergentle 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

有这个：

 <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>

您可以在 此处查看演示 中的示例（“美杜莎之眼”和“火雨”菜单项）。

原文由 thdoan 发布，翻译遵循 CC BY-SA 3.0 许可协议