引导字形图标而不更改字体答案

【问题标题】：Bootstrap glyphicons without changing fonts引导字形图标而不更改字体
【发布时间】：2014-08-17 20:26:14
【问题描述】：

我正在使用 Bootstraps 字形图标，包括它们：

 <!-- Load Bootstrap CSS (Flatly) and Javascript -->
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

在我加载 glyphicons CSS 文件之前，我的字体很好。我没有设置字体，而是使用任何 Bootstrap 或 jQuery 默认设置字体。

现在我已经包含了那个 glyphicon CSS 文件，我的字体已经改变了。我可以在忽略字体的情况下使用字形吗？

【问题讨论】：

他们都在html 上设置了font-family: sans-serif。你能发布一个链接或更好的fiddle 来显示这种行为吗？
另见：getbootstrap.com/customize

标签： css twitter-bootstrap twitter-bootstrap-3 glyphicons

【解决方案1】：

正如您在此处看到的 http://www.bootply.com/5Amv5odg7X 您不需要单独加载字形图标，只需确保在之前平坦地加载股票 Bootstrap，您就可以很好。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">

此外，通常认为最佳做法是在所有 html 内容之后加载您的 .js 文件，因此它不会影响页面加载。

【讨论】：

【解决方案2】：

您正在使用已包含图标并导入自定义 Google 字体的自定义版本的 Bootstrap css。在此处检查您链接到的文件：

<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">

此文件包含嵌入其中的所有字形图标的样式，因此无需单独添加指向<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> 的cdn 的链接。

至于你的字体“改变”，这个文件中的第一行从谷歌导入 Lato 字体并设置为正文字体。如果您不想使用自定义字体，请下载 flatly css 文件（而不是链接到远程文件）并删除 css 文件顶部的 import 语句。或者，覆盖您自己的 css 文件中的样式。（最好是前者，因为如果您不使用 Google 字体，让您的网站访问者下载它们会很浪费）。

【讨论】：