Question

我已经购买了完整的Glyphicons PRO软件包，并希望将它与Bootstrap 3一起使用。

但是，我似乎无法找到有关如何执行此操作的全面文档。 Glyphicons网站缺少“如何使用部分”，随附的PDF也没有多大帮助 - 它提到的glyphicons.css文件不属于下载包...

非常感谢有关如何进行此替换的任何帮助。

Answer 1

在你的bootstrap文件夹中是一个包含Glyphicons字体的字体文件夹（主要在CSS文件夹中）。

那些需要替换为您拥有的专业版。

接下来，您需要指向（如果字体不相同的字体）到引导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");
}

并替换字体文件名（如果您将它们放在另一个地方，也可以替换位置）

Answer 2

如上面的一些评论所述，与Glyphicons PRO软件包相比，它们在Glysticons的bootstrap FREE版本中存在差异。

作为回顾，这里主要是差异：

[差异]：[ Bootstrap＆＃39; s Glyphicons FREE ] VS [ Glyphicons PRO ] < / LI>
图标字体名称：＆＃34; glyphicons-halflings-regular＆＃34; VS ＆＃34; glyphicons-定期＆＃34;
css班级名称：＆＃34; glyphicon＆＃34; ，＆＃34; glyphicon - ＆＃34; * VS ＆＃34; glyphicon s ＆＃34; ，＆＃34; glyphicon s - ＆＃34; *
字体系列：＆＃34; Glyphicons Halflings＆＃34; VS ＆＃34; Glyphicons Regular＆＃34; < / em>的

鉴于Bootstrap的Glyphicons是Glypicons PRO的子集，你不应该同时使用它们，而是取代香草Bootstrap的 pro包中的glyphicons.less 文件（在Bootstrap＆＃34; less＆＃34;文件夹中）。

如果您正在使用js构建工具，例如 Bower ＆amp; Grunt ，您可以使用 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

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

2 个答案: