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

Question

所以...我访问了：

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

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

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

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

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

我在他们网站上获取的代码无效。

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

Answer 1

要加载最低限度以获得最佳性能，您可以使用此

1。创建文件夹 "webfonts"。在这个文件夹下，新建一个文件夹"font-awesome"，将三个font awesome文件复制到这个文件夹里。然后，在您的 html 文件中使用 <link rel="stylesheet" href="webfonts/fontloader.css">

创建样式表 "fontloader.css" 和 link

+-- [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 or for brands on https://fontawesome.com/icons?s=BRANDS

例如，您 css

中的 'search' 图标

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

3。然后在 html

中使用以下内容

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

Answer 2

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

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

How can I add the Font Awesome to my project so it displays the icons correctly?

html

css

font-awesome