从Bootstrap删除Glyphicons

Question

如何从bootstrap 3中删除字形图标的所有实例？它看起来像是大量嵌入到.css文件中:(

我正在尽量保持最小的文件大小。

Answer 1

我将假设您不是使用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"。

Answer 2

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

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

Answer 3

您可以在下载bootstrap之前对其进行自定义，以删除不必要的组件。

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