Html 如何在不使用引导CSS的情况下包含GlyphIcon

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

所以这个问题可能很傻，我只想在没有引导css的情况下在客户端网站菜单链接中包含图标

首先可能吗？我知道Glyphicons免费将随Bootstrap软件包一起提供

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

那么，是否可以在没有引导css或我自己的自定义css的情况下包含GlyphIcon

---

任何帮助都将不胜感激

是的，您只需从此页面下载：（下面的免费选项）

编辑：

---

在此线程中，您可以了解更多信息：

这是一个bower软件包，您只能在整个引导过程中使用它

检查此github存储库

或

编辑

现在可以通过NPM下载包了

npm install glyphicons-only-bootstrap

---

我试图在不安装整个Bootstrap.css文件的情况下让Bootstrap的glyphicons正常工作，但中途工作太多，我放弃了。相反，我遇到了。引导程序3本身使用它（或曾经使用）。它的设计是作为一个独立的，所以它非常简单和轻。你所要做的就是：

字体包装

将

font-awesome.min.css

复制到您的css文件夹中，并将所有字体文件从font-awesome的字体文件夹复制到您的字体文件夹中

在HTML的

中包含

从中选择图标并将其放入应用程序中，就像启动图标一样

这是：

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

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

@字体{
字体系列：“字形图标半身人”；
src:url（'//cdnjs.cloudflare.com/ajax/libs/twitter bootstrap/3.3.7/font/glyphicons-halflings-regular.eot'）；
src:url（'//cdnjs.cloudflare.com/ajax/libs/twitter bootstrap/3.3.7/fonts/glyphicons halflings regular.eot？#iefix'）格式（'embedded-opentype'），
url（'//cdnjs.cloudflare.com/ajax/libs/twitter bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2'）格式（'woff2'），
url（'//cdnjs.cloudflare.com/ajax/libs/twitter bootstrap/3.3.7/font/glyphions/regular.woff'）格式（'woff'），
url（'//cdnjs.cloudflare.com/ajax/libs/twitter bootstrap/3.3.7/fonts/glyph/regular.ttf'）格式（'truetype'），
url（'//cdnjs.cloudflare.com/ajax/libs/twitter bootstrap/3.3.7/font/glyphicons halflings regular.svg#glyphicons_halflings regular'）格式（'svg'）；
}
.字形图标{
位置：相对位置；
顶部：1px；
显示：内联块；
字体：普通16px/1“半人字形”；
-moz osx字体平滑：灰度；
-webkit字体平滑：抗锯齿；
保证金权利：4px；
}
/*在下面添加您将要使用的图标*/
.发射前{
内容：'\e104'；
}
.Glypicon眼睛睁开：之前{
内容：'\e105'；
}

---

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

我在引导程序方面也遇到了同样的问题，我只需要一个箭头，但添加时会把它弄糟

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

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

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

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

---

你需要有你自己的！：）

转到备忘单[

---

备选；

Font-Awesone

如果您想在没有引导的情况下使用PRO版本，您必须购买该版本。就我所知，使用Glyphicons而没有引导是侵犯版权的。请不要这样做，而是使用免费的替代品，如Font-Awesome。“Glyphicons半身人通常不免费提供，但他们的创建者已免费为他们提供引导。作为感谢，我们只要求您尽可能提供Glyphicons的链接。"-你的问题并不愚蠢；这么多开发人员让引导程序对标准CSS造成严重破坏的方式是愚蠢的！我想使用一个库，它需要Glyphicons，但我不想让引导程序使我的CSS成为FUBAR。引导程序只对具有特定类及其后代的元素起作用会更好，我不明白为什么会这样这不是引导的工作方式。（如果你真的想让类接管一切，只需将类添加到

元素中！）也许我已经老了——我已经使用CSS 20年了，虽然我一直在坚持，但我仍然希望CSS3能以某种方式工作。是的。但是免费版本没有CSS选项，只有png可用。对于CSS版本，我需要使用专业版或引导版。谢谢。而且不可能从引导版获取CSS和字体文件并只使用它吗？我不确定这是否可行，但这是一个想法。或者你可以尝试使用Font Awesome，就像HDDDNTHANKS对你说的那样，这很有帮助！也许我误解了一些东西，但我不知道这是如何工作的。FontAwesome使用不同的类，所以如果你使用的库需要GlyphIcon类，例如

，那么什么都不会出现。我喜欢使用FontAwesome，但不幸的是，我想使用的第三方库，甚至是非引导版本。（也许这是对库作者的疏忽，但我正在努力解决。）问题是如何在没有其他引导的情况下使用引导图标，而不是如何用其他东西替换它。对于downvoter：如果这个解决方案对你不起作用，请提供建设性的反馈。不是我否决了你，我真的很讨厌那些没有理由就投票的人，网站甚至对l留下评论！但是你的CDN链接仍然填充了标准的CSS（尽管它声称要“正常化”它），所以它有e