Question

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

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

Answer 1

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

注释掉@import "bootstrap/glyphicons";

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

Answer 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"。

Answer 3

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

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

从Bootstrap中删除Glyphicons

3 个答案: