从Bootstrap中删除Glyphicons [英] Remove Glyphicons from Bootstrap

问题描述

如何从引导程序3中删除所有glyphicons实例?看起来它已大量嵌入.css文件中:(

How can I remove all instances of glyphicons from the bootstrap 3? It looks like it's heavily embedded into the .css file :(

我正在尝试将文件大小保持为最小.

I'm trying to keep the file size minimum as possible.

推荐答案

我将假定您不是使用LESS或SASS代码库构建Bootstrap，而是下载整个预构建的库.如果是这样，请转到 Bootstrap的自定义页面，然后取消选中不需要的任何组件，例如Glyphicons，然后下载新的来源.

I'm going to assume that you're not building Bootstrap with the LESS or SASS code base and are downloading the whole library pre-built. If so, go to Bootstrap's customize page and uncheck any components that you don't want, i.e. Glyphicons, then download the new source.

许多在线字体库工具(我喜欢自己使用 Fontello )将允许您仅选择您想要的图标并从中创建图标字体.他们不仅会创建图标字体，还将提供CSS来将字体包括到您的项目中，它看起来像这样:

A lot of the online font library tools, I like to use Fontello myself, will allow you to select just the icons you want and create an icon font from that. Not only do they create the icon font but will also provide the CSS to include the font into your project, it will look something like this:

@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字体即可.如果您对包含/嵌入图标字体还有其他疑问，请.

Now simply include the font CSS into your main CSS stylesheet. If you have any additional questions about including/embedding an icon font I would Google "How to include font icon".

这篇关于从Bootstrap中删除Glyphicons的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！