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

Question

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

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

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

另外，我的客户不希望我包含 Bootstrap CSS，因为它会影响页面结构。

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

如有任何帮助，我们将不胜感激！

Answer 1

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

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

Answer 2

这是一个 bower 包，您只能使用整个 bootstrap 中的字形。

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

或

bower install glyphicons-only-bootstrap

编辑

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

npm install glyphicons-only-bootstrap

Answer 3

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

Download 字体真棒包;
将 font-awesome.min.css 复制到您的 css 文件夹中，并将 Font Awesome 字体文件夹中的所有字体文件复制到您的字体文件夹中；
在您的 HTML 的 <head> 中包含 <link rel="stylesheet" href="path/to/css/font-awesome.min.css">；
从 icon library 中选择图标并将它们放入您的应用程序中，就像 Bootstrap 的字形一样。

Answer 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（"Eye of Medusa" 和 "Rain of Fire" 菜单项中查看示例）。

Answer 5

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

所以我搬到了 FontAwesome，效果很好！

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

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

您需要拥有自己的！ :)

Answer 6

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

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

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

How to include Glyphicons without using Bootstrap CSS

html

css

twitter-bootstrap

glyphicons

twitter-bootstrap-3