Html 如何在不使用 Bootstrap CSS 的情况下包含 Glyphicons
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37448338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to include Glyphicons without using Bootstrap CSS
提问by Raja
My Client project using some basic HTML and CSS. But they like the Glyphicons on the Website menus. So i just tried to include Glyphicons with the Bootstrap CSS, it does, but the other css got affected after including the Bootstrap CSS.
我的客户项目使用一些基本的 HTML 和 CSS。但他们喜欢网站菜单上的 Glyphicons。所以我只是尝试在 Bootstrap CSS 中包含 Glyphicons，它确实如此，但是在包含 Bootstrap CSS 之后其他 css 受到了影响。
So the question may be silly, I just want to include Glyphicons in client website menu links without bootstrap css.
所以这个问题可能很愚蠢，我只想在没有引导 css 的客户端网站菜单链接中包含 Glyphicons。
Is that possible first? I know Glyphicons free will be available with Bootstrap Package.
可以先这样吗？我知道 Glyphicons 免费将随 Bootstrap 包提供。
And other things is that my client do not want me to include Bootstrap CSS since it is affecting page structure.
其他事情是我的客户不希望我包含 Bootstrap CSS，因为它会影响页面结构。
So is it possible to include Glyphicons without Bootstrap css or my own custom css?
那么是否可以在没有 Bootstrap css 或我自己的自定义 css 的情况下包含 Glyphicons？
Any help would be appreciated!
任何帮助，将不胜感激！
采纳答案by supergentle
Here is a bower package that you can use only glyphicons out of entire bootstrap.
这是一个 bower 包，您只能使用整个引导程序中的字形。
Check this github repository https://github.com/ohpyupi/glyphicons-only-bootstrap
检查这个 github 存储库https://github.com/ohpyupi/glyphicons-only-bootstrap
or
或者
bower install glyphicons-only-bootstrap
EDIT
编辑
Now it's possible to download the package through NPM.
现在可以通过 NPM 下载包了。
npm install glyphicons-only-bootstrap
回答by Arthur Tarasov
I was trying to get Bootstrap's glyphicons to work without installing the whole bootstrap.css file, but half way through it became too much work and I gave up. Instead, I came across Font Awesome. Bootstrap 3 itself uses it (or used to use). It is designed to be used as a standalone so it's really simple and light. All you have to do is:
我试图让 Bootstrap 的字形在不安装整个 bootstrap.css 文件的情况下工作，但中途它变得太多工作，我放弃了。相反，我遇到了Font Awesome。Bootstrap 3 本身使用它（或曾经使用）。它设计为独立使用，因此非常简单轻便。您所要做的就是：
DownloadFont Awesome package;
Copy
font-awesome.min.cssinto your css folder and all of the fonts files from Font Awesome's fonts folder into your fonts folder;Include
<link rel="stylesheet" href="path/to/css/font-awesome.min.css">in the<head>of your HTML;Choose icons from the icon libraryand put them into your app just as you would Bootstrap's glyphicons.
回答by thdoan
There's this:
有这个：
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
However, if you want to conserve some bandwidth, you can load the fonts directly from a CDN and then inline the required CSS, like this:
但是，如果您想节省一些带宽，您可以直接从 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>
You can see an example in the demo here("Eye of Medusa" and "Rain of Fire" menu items).
回答by Alejandro Garrido
Yes, you only need download from this page: http://glyphicons.com/(Free option below)
是的，您只需要从这个页面下载：http: //glyphicons.com/（下面的免费选项）
EDIT: In this thread more info about this: Bootstrap 3 Glyphicons CDN
编辑：在此线程中有关此的更多信息：Bootstrap 3 Glyphicons CDN
回答by George
I had the same problem with Bootstraps, I just need an arrow but mess it up when added it.
我在 Bootstraps 上遇到了同样的问题，我只需要一个箭头，但在添加时把它搞砸了。
So I moved to FontAwesome, worked beautifully!
所以我搬到了 FontAwesome，效果很好！
You can also get the CDN that looks like this:
您还可以获得如下所示的 CDN：
<script src="https://use.fontawesome.com/2734t3et304.js"></script>
You need to get your own! :)
你需要得到你自己的！:)
回答by Naved Khan
go to glyphicons cheatsheet [https://glyphicons.bootstrapcheatsheets.com/]
转到 glyphicons 备忘单 [ https://glyphicons.bootstrapcheatsheets.com/]
li:before {
font-family: "Glyphicons Halflings";
content: "\e013";
/* other code as per need*/
}
