Question

您好我正在尝试添加FontAwesome中的字体以便使用它们的图标，并且它们需要一个名为Fonts的根文件夹。

我尝试将其与

相关联

<link type="text/css" href="/myPath/font" />

Answer 1

只是好奇，你究竟怎么知道这些字体没有插入？是因为你无法使用font-awesome创建图标吗？

除此之外，如果您使用bower，npm安装font-awesome或从github中提取它，它应具有以下目录结构。

font-awesome
    css
        font-awesome.css
    font
        (font files / eot, svg, ttf, woff)

如果它在这个目录结构中，那么你的css应该指向那些字体文件。然后，只需要像这样拉入字体真棒的CSS：

<link rel="stylesheet" href="{{path}}/font-awesome/css/font-awesome.css" />

我会仔细检查你的目录结构是否有字体 - 如果没别的话可能会尝试通过bower安装它。

我希望有所帮助。

Answer 2

FontAwesome中的字体在css中的@ font-face规则中声明。如果使用less或scss版本，则可以覆盖变量中设置的路径：

$fa-font-path:        "path/to/your/fonts";

如果你只是使用css版本，你应该可以重新声明font-face规则（用你的路径替换'../fonts/'）：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Answer 3

据我所知，你必须添加 css 文件的链接， css 文件将链接到字体预设的字体文件夹 - 很棒的图书馆。因此，您的代码将包含 font-awesome.min.css 文件，您需要将字体文件夹放在同一目录中，但链接将在html中查找，如下所示：

<link rel="stylesheet" type="text/css" href="font-awesome.min.css"/>

或使用cdn：

<link rel="stylesheet" type='text/css' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>

希望这有帮助！

Answer 4

使用chrome浏览器，

在转到控制台选项卡时按F12

检查错误的详细信息，它将显示路径浏览器正在寻找FONTS，

确保该路径上存在字体...

就是这样......

如何链接FontAwesome中的字体文件夹

4 个答案: