从 Bootstrap 中删除 Glyphicons

Posted 2023-03-06

【中文标题】从 Bootstrap 中删除 Glyphicons

【英文标题】：Remove Glyphicons from Bootstrap

【发布时间】：2015-07-03 03:40:28

【问题描述】：

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

我正在尝试尽可能减少文件大小。

【参考方案1】：

只需简单地从 https://github.com/twbs/bootstrap-sass 克隆引导程序并从 _bootstrap.scss 中注释掉 @import "bootstrap/glyphicons";

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

【参考方案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"。

【参考方案3】：

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

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