如何将 Font Awesome 添加到我的项目中，以便正确显示图标？答案

【问题标题】：How can I add the Font Awesome to my project so it displays the icons correctly?如何将 Font Awesome 添加到我的项目中，以便正确显示图标？
【发布时间】：2020-03-05 15:18:40
【问题描述】：

所以...我访问了：

https://fontawesome.com/start

下载了 zip 文件，我只是想使用图标，所以我抓取了 fontawesome.min.css 文件并连接到我的 html 文件：

<link rel="stylesheet" href="lib/css/fontawesome.min.css">

在他们的网站上，我找到了我想使用的代码：

<i class="fas fa-cloud-download-alt"></i>

上面这段代码的链接在这里： https://fontawesome.com/icons/cloud-download-alt?style=solid

我在他们网站上抓取的代码不起作用。

我在这里缺少什么？如何将 Font Awesome 添加到我的项目中以显示图标？

【问题讨论】：

如果你指向all.css，就像他们在他们的文档中所做的那样，而不是fontawesome.min.css，会发生什么？ <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

标签： html css font-awesome

【解决方案1】：

要加载最小值以获得最大性能，您可以使用此

1。创建一个文件夹“webfonts”。在这个文件夹中，创建一个文件夹“font-awesome”并在这个文件夹中复制三个字体真棒文件。然后，创建一个样式表“fontloader.css”并在你的html文件中用<link rel="stylesheet" href="webfonts/fontloader.css">链接它

+-- [webfonts]
|      +-- [font-awesome]
|      |      +-- fa-solid-900.woff2
|      |      +-- fa-solid-900.woff
|      |      +-- fa-solid-900.ttf
|      |
|      +-- fontloader.css

fontloader.css 的内容

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url("../webfonts/font-awesome/fa-solid-900.woff2") format("woff2"),
         url("../webfonts/font-awesome/fa-solid-900.woff") format("woff"),
         url("../webfonts/font-awesome/fa-solid-900.ttf") format("truetype");
}
.fa, .fas, .far, .fal, .fad, .fab {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    font-size: 1em;
    line-height: 1;
    text-rendering: auto;
}

2。在 Font Awesome 网站 https://fontawesome.com/icons?s=SOLID 或 https://fontawesome.com/icons?s=BRANDS 上搜索您的图标

例如，CSS 中的“搜索”图标

.fa-search:before {
    content: "\f002"
}

3。然后在您的 html 中使用以下内容

<i class="fas fa-search"></i>

【讨论】：

【解决方案2】：

所以我找到了答案，需要这两个文件才能使 fontsawesome 工作：all.min.css 和 all.min.js 加上根目录中的 webfonts 文件夹，然后“Font Awesome”中的所有代码都可以工作，那些文件是最低要求。此外，如果您不需要所有代码，它可能会更小，而不是“全部”，有一些较小的文件允许只使用“Font Awesome”的一小部分。

【讨论】：