【问题标题】：How are glyph icons loaded in /fonts?/fonts 中如何加载字形图标？
【发布时间】：2015-04-21 05:49:02
【问题描述】：

底部的解决方案。

引导新手在这里 - 我读过 Bootstrap 期望 glyphicons 位于 /fonts 目录中（默认情况下）。

我从 glyphicons.com 下载了文件 - 超过 1200 个 PNG 文件（包括 Mac）。文件名不匹配 - 它们的名称类似于 glyphicons-225-chevron-right.png （“s”和“-225”），而不是我的代码要求的 glyphicon-chevron-right。我复制了“chevron-right”和“left”文件，更改了名称以匹配，将文件移动到“fonts”下的“glyphicon”文件夹中，将1225文件直接加载到“fonts”文件夹中，等等。

我已经搜索过，但没有适合我的答案（Stackoverflow 的点击率最高）。我搜索了 w3，Bootstrap，检查了 Bootswatch 和其他人的源 HTML。

我正在使用来自 Bootswatch 的引导 css 文件、来自 googleapis 的 jquery、来自 bootstrapcdn 的 js。

解决方案 = 添加：

我不知道它是如何在我的代码中结束的，但我在我发现确实有效的一个示例的底部附近找到了它（缺少结束符 >）。

我第一次尝试时从第一个答案中截取的以下内容（我认为）有效。现在它没有，即使我添加了“bootstrap-glyphicons.css”

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
<body>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

</body>
</html>

【问题讨论】：

标签： twitter-bootstrap glyphicons

【解决方案1】：

您不需要任何外部字形图标来使引导字形图标工作。默认情况下，它们都存储在字体文件夹中。

所以开箱即用的引导结构是这样的

/
  css/
    bootstrap.css
    bootstrap.min.css
  js/
    bootstrap.js
    bootstrap.min.js
  fonts/
    glyphicons-halflings-regular.woff
    -etc.
  index.html

包括 bootstrap.css，它会从 '../fonts/' 加载所有的字形图标例如index.html 的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

  </body>
</html>

它应该可以工作。

【讨论】：

“开箱即用”表示 Bootstrap 内置标准链接？
是的，当您下载引导程序时，您会得到概述的结构。
“开箱即用”是指 Bootstrap 中内置的标准链接？即，我不需要将这些添加到我的“字体”文件夹中 - 对吧？好的，我用了你的“头”，它奏效了。所以我的头是错的。但是怎么了？我正在使用：