【问题标题】:remove bootstrap glyphicons from bootstrap css从 bootstrap css 中删除 bootstrap glyphicons
【发布时间】:2018-08-31 20:47:07
【问题描述】:

我想从 Bootstraop css 中删除 Bootstrap 图标包,因为它太重了,而且我使用的字体很棒。有什么办法可以去掉。

我正在使用 webpack 将 scss 文件编译成 css。

我正在使用最新版本的引导程序。我已经安装了bootstrap-sass@import "~bootstrap-sass/assets/stylesheets/bootstrap"; 来导入引导程序。

如果您需要任何进一步的信息,请发表评论。

【问题讨论】:

  • 您使用的是哪个版本的 Bootstrap?您是直接引用 Bootstrap CSS 还是从源代码构建它?
  • Bootstrap-sass 创建您的自定义 scss 文件,以便您导入要使用的 bootstrap-sass 组件并且不要导入 _glyphicons.scss
  • @DavidG 我已经更新了我的问题
  • @yvesdaxmaz 这正是我想知道的。你也可以用代码回答这个问题吗?

标签: twitter-bootstrap webpack sass glyphicons


【解决方案1】:

而不是导入bootstrap-sass/assets/stylesheets/bootstrap 只需创建一个自定义文件,您就可以像这样导入没有 glyphicon 的 evrything

bootstrap-sass/assets/stylesheets/bootstrap 的内容是这样的,我在导入 glyphicon 的那一行做了一些修改

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

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

// Here is where the glyphicons are import
// I comment just this line and every thing will work like you want without the glyphicons
//@import "bootstrap/glyphicons"; 

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

```

【讨论】:

  • 引导版本 4 及更高版本是否相同?无论如何感谢您的帮助。
  • 欢迎您使用 bootstrap 4 没有 glyphicon 组件,请看这里Bootstrap 4 asset,导入所有断言的文件是bootstrap.scss
  • 那么,您的意思是 Bootstrap 4 中没有字形图标?我还没有开始使用 Bootstrap 4。
  • 是的,他们决定将其从引导程序中删除,并建议使用 glyphicons 作为外部组件或 fontawesome Drop the glyphicons font
  • 感谢您让我知道这一点。谢谢你的帮助。快乐编码。 ??
猜你喜欢
  • 2015-07-03
  • 2013-08-15
  • 2015-10-31
  • 1970-01-01
  • 1970-01-01
  • 2015-02-22
  • 2013-10-05
  • 1970-01-01
相关资源
最近更新 更多