从Bootstrap中删除Glyphicons

Question

如何从Bootstrap 3中删除所有的glyphicons图标？看起来它们被大量嵌入到.css文件中 :(

我试图尽可能地减小文件大小。

- Elaine Byene

Answer 1

只需从https://github.com/twbs/bootstrap-sass克隆bootstrap，然后从_bootstrap.scss中注释掉@import "bootstrap/glyphicons";即可。

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

- Mo.

Answer 2

我假设您不是使用LESS或SASS代码库构建Bootstrap，而是下载整个库进行预构建。如果是这样，请访问Bootstrap自定义页面并取消选中任何您不需要的组件，例如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 "如何包含字体图标"。

- hungerstar

Answer 3

您可以在下载Bootstrap之前自定义它，以删除不必要的组件。

前往http://getbootstrap.com/customize/，然后取消勾选Glyphicons组件。

- enigma