底部的解决方案。

Question

底部的解决方案。

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

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

我已经搜索过了，但没有一个对我有用的答案（Stackoverflow的搜索次数最多）。我搜索了W3，Bootstrap，检查了Bootswatch和其他人的源HTML。

我正在使用来自Bootswatch的bootstrap css文件，来自googleapis的jquery，来自bootstrapcdn的js。

解决方案= 添加：

我不知道它是如何在我的代码中结束的，但我发现它（缺少结束＆gt;）靠近我发现确实有效的一个例子的底部。

我第一次尝试时从第一个答案中删除了以下内容（我认为）。现在它没有，即使我添加了“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>

Answer 1

您不需要任何外部glyphicons来使引导程形式字形工作。所有这些都默认存储在fonts文件夹中。

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

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

包含bootstrap.css，它将从'../fonts/'加载所有glyphicons 例如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>

它应该有用。

如何在/ fonts中加载字形图标？

底部的解决方案。

1 个答案: