从Bootstrap中删除Glyphicons

Question

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

我试图尽可能减小文件大小.

Answer 1

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

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

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样式表中即可.如果您对包含/嵌入图标字体有任何其他问题,我会谷歌"如何包含字体图标".