Bootstrap 3 中的 Glyphicon Pro答案

【问题标题】：Glyphicon Pro in Bootstrap 3Bootstrap 3 中的 Glyphicon Pro
【发布时间】：2016-02-08 23:00:40
【问题描述】：

我想使用 Glyphicons Pro（以及社交和文件类型）。但是 bootstrap 对图标有不同的方式。

在引导程序中：glyphicon glyphicon-ok 在字形中：glyphicon ok

恕我直言，最后一个选项更好。

我的问题是：我如何在引导程序中使用 glyphicons pro，因为 glyphicon 类已被半身人保留。

我的想法：

stackoverflow 上有很多类似的问题，要么是关于替换半身人，要么是没有正确回答。

【问题讨论】：

【解决方案1】：

你应该编译一个没有 gylphicons 组件的 Bootstrap 版本here. 只需取消选中组件下的Glyphicons，然后到底部点击“编译和下载”即可。

之后，您可以包含 Glyphicons Pro，而不会在类名中产生冲突。

【讨论】：

我在考虑这个解决方案，但是： * 我使用 grunt 和 bower，所以我根本不从 bootstrap sit 下载任何东西。 * 我想集成 Pro 包，所以 BC 不应该被破坏。
那么你应该从 Bootstrap 库和 bootstrap.less 中删除 glyphicons.less，然后在 less 文件中添加 Glyphicons 的 css 和 @import 在 bootstrap.less 中。这样，它将使用 Bootstrap 进行编译。
“我想集成 Pro 包，所以不应该破坏 BC。”

【解决方案2】：

从 Bootstrap 3.3.6 开始，以下方法对我有用：

在本地下载并提取 Bootstrap 源代码。

you@home:~$ mkdir bs3_src && cd bs3_src/
you@home:~bs3_src/$ git clone https://github.com/twbs/bootstrap.git .

提取 Glyphicons Pro 包并导航到 (src)/glyphicons_pro/glyphicons/web/html_css/less 下的“Glyphicons Regular”系列 glyphicons.less 文件。用这个替换bootstrap/less/glyphicons.less。将所有半身人字体文件替换为来自 PRO 源的 glyphicons-regular.* 对应文件到 bootstrap/fonts/。如果您需要.social 和.filetype 字体，请将它们各自的子文件夹中的glyphicons-filetypes.less 和glyphicons-social.less 添加到bootstrap/less/（不要忘记将它们的字体文件也推送到bootstrap/fonts/）。

打开bootstrap/less/bootstrap.less 进行编辑。您正在寻找早期的进口声明：

...
@import "glyphicons.less";
// Extras go here:
@import "glyphicons-filetypes.less";
@import "glyphicons-social.less";
...

安装node/npm 和grunt 如果您还没有按照引导程序的“入门”部分的instructions 安装。继续：
```
you@home:~/bs3_src$ npm install
you@home:~/bs3_src$ grunt dist
```

到现在为止，您的bootstrap/dist/ 文件夹应该包含一组精美的组合*.css、*.min.css 和*.map 文件以及适当的字体系列，以及所有其他PRO 附加组件。将其子文件夹复制到项目的资产中并进行相应的链接。

这种方法的好处是它可以作为一个工作流自动化（查看related post），以合并来自 Bootstrap 或 Glyphicons 的定期更新，更不用说任何需要编译的自定义 .less。

就覆盖类方案而言，即“glyphicons glyphicons-ok”=>“gi gi-ok”：在编译之前对源文件较少的任何正则表达式或repl 类型的操作将很快实现这一点。您只需保持警惕，确保您的任何其他第三方应用程序不会受到不利影响。

【讨论】：