从 Bootstrap 中删除 Glyphicons答案

【问题标题】：Remove Glyphicons from Bootstrap从 Bootstrap 中删除 Glyphicons
【发布时间】：2015-07-03 03:40:28
【问题描述】：

如何从 bootstrap 3 中删除所有 glyphicons 实例？看起来它被大量嵌入到 .css 文件中:(

我正在尝试尽可能减少文件大小。

【问题讨论】：

标签： css twitter-bootstrap-3 glyphicons twitter-bootstrap-2

【解决方案1】：

只需简单地从 https://github.com/twbs/bootstrap-sass 克隆引导程序并从 _bootstrap.scss 中注释掉 @import "bootstrap/glyphicons";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
//@import "bootstrap/glyphicons";

【讨论】：

【解决方案2】：

我假设您没有使用 LESS 或 SASS 代码库构建 Bootstrap，而是下载了预构建的整个库。如果是这样，请转到 Bootstrap's customize page 并取消选中您不需要的任何组件，即 Glyphicons，然后下载新的源代码。

很多在线字体库工具，我自己喜欢使用Fontello，将允许您只选择您想要的图标并从中创建图标字体。他们不仅会创建图标字体，还会提供 CSS 以将字体包含到您的项目中，它看起来像这样：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

// Catchall baseclass
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Individual icons
.glyphicon-asterisk               { &:before { content: "\2a"; } }
.glyphicon-plus                   { &:before { content: "\2b"; } }
/* ... more icons ... */
/* ... more icons ... */
/* ... more icons ... */
.glyphicon-menu-down              { &:before { content: "\e259"; } }
.glyphicon-menu-up                { &:before { content: "\e260"; } }

现在只需将字体 CSS 包含到您的主 CSS 样式表中。如果您对包含/嵌入图标字体有任何其他问题，我会Google "How to include font icon"。

【讨论】：

【解决方案3】：

您可以在下载之前自定义引导程序以删除不必要的组件。

转到http://getbootstrap.com/customize/，然后取消选中 Glyphicons 组件。

【讨论】：