从 Bootstrap 中删除 Glyphicons

Question

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

我正在努力使文件大小尽可能小。

Answer 1

您可以在下载前自定义 bootstrap 以删除不需要的组件。

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

Answer 2

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

很多在线字体库工具，我自己喜欢使用 Fontello，它们可以让您 select 只是您想要的图标并从中创建图标字体。他们不仅创建图标字体，还会提供 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: "a"; } }
.glyphicon-plus                   { &:before { content: "b"; } }
/* ... more icons ... */
/* ... more icons ... */
/* ... more icons ... */
.glyphicon-menu-down              { &:before { content: "\e259"; } }
.glyphicon-menu-up                { &:before { content: "\e260"; } }

现在只需将字体 CSS 添加到主 CSS 样式表中。如果您对 including/embedding 图标字体有任何其他问题，我会 Google "How to include font icon".

Answer 3

只需从 https://github.com/twbs/bootstrap-sass 克隆 bootstrap 并从 _bootstrap.scss

注释掉 @import "bootstrap/glyphicons";

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

从 Bootstrap 中删除 Glyphicons

Remove Glyphicons from Bootstrap

css

glyphicons

twitter-bootstrap-3

twitter-bootstrap-2