在Bootstrap 3中用Glyphicons PRO替换标准的Glyphicons Halflings？

Question

在Bootstrap 3中用Glyphicons PRO替换标准的Glyphicons Halflings？

9

我已购买完整的Glyphicons PRO套餐，并希望将其与Bootstrap 3一起使用。然而，我似乎找不到关于如何实现此操作的全面文档。Glyphicons网站缺少“如何使用”部分，附带的PDF也没有什么帮助-它提到了一个不在下载包中的glyphicons.css文件...非常感谢任何有关如何进行替换的帮助。

- agibsen

2个回答

3

您的Bootstrap文件夹中有一个字体文件夹（大多在CSS文件夹中），其中包含了Glyphicons字体。

这些需要用您拥有的专业版进行替换。

接下来，如果字体名称不同，则需要在Bootstrap CSS中指向新的字体。这取决于您使用的技术。

但是您必须搜索：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('fonts/bootstrap/glyphicons-halflings-regular.eot');
  src: url('fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix') format("embedded-opentype"), url('fonts/bootstrap/glyphicons-halflings-regular.woff') format("woff"), url('fonts/bootstrap/glyphicons-halflings-regular.ttf') format("truetype"), url('fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format("svg");
}

并替换字体文件的名称（或者如果您将它们放在另一个位置，则可能是位置）

- Mark

1

谢谢，我尝试了你的建议，但无法使其工作。Glyphicons PRO似乎与Halflings有另一种CSS语法... - agibsen

2

然后，您需要使用PRO版本提供的CSS替换原始的glyphicons字体。 - Mark

1

一个注意事项，Bootstrap CSS中包含的Glyphicons类具有glyphicon glyphicon-something的类名，而PRO版本中的Glyphicons类名为glyphicons glyphicons-something（请注意s）。 - eduski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tinesoft · Accepted Answer

如上面的一些评论中提到的，Bootstrap免费版的Glyphicons与Glyphicons PRO包中的版本存在差异。

以下是主要区别：

- 【差异】：[Bootstrap的Glyphicons FREE] VS [Glyphicons PRO] - 图标字体名称： "glyphicons-halflings-regular" VS "glyphicons-regular" - CSS类名称："glyphicon"，"glyphicon-"* VS "glyphicons"，"glyphicons-"* - 字体家族： "Glyphicons Halflings" VS "Glyphicons Regular"

鉴于Bootstrap的Glyphicons是Glypicons PRO的子集，您不应同时使用两者，而应该将Bootstrap的“less”文件夹中的原始glyphicons.less文件替换为PRO包中的文件。

如果您正在使用像Bower和Grunt这样的JS构建工具，则可以使用grunt-contrib-copy任务自动化此过程。

copy: {
server: {               
    files: [{//replace the vanilla Bootstrap's FREE glyphicons.less by the PRO's version
        expand: true,
        dot: true,
        cwd: 'path/to/your/less', //put glyphicons.less (PRO version) here                  
        dest:'path/to/bower_components/bootstrap/less',
        src: 'glyphicons.less'
    }]
}

这个任务可以在以下位置注册：

 grunt.registerTask('serve', [
    'copy:server', //replace the vanilla bootstrap's glyphicons
     // your other tasks here, for eg: 
     // 'less:server', // to compile the less

    ]);

并且将运行在以下环境中：

grunt serve