Question

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

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

这可能是第一个吗？我知道Glyphicons free将与Bootstrap Package一起提供。

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

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

任何帮助将不胜感激！

Answer 1

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

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

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>

您可以在demo here（＆＃34;美杜莎之眼＆＃34;＆＃34; Rain of Fire＆＃34;菜单项）中看到一个示例。

Answer 3

这是一个bower包，你只能使用整个bootstrap中的glyphicons。

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

或

bower install glyphicons-only-bootstrap

修改

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

npm install glyphicons-only-bootstrap

Answer 4

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

编辑：在这个帖子中有关于此的更多信息：Bootstrap 3 Glyphicons CDN

Answer 5

我对Bootstraps有同样的问题，我只需要一个箭头，但在添加它时会搞砸它。

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

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

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

你需要得到自己的！：）

Answer 6

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

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

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

6 个答案: