如何通过HTML使用Font Awesome v5.7.2

Font Awesome is one of the most popular ways to add icons to your site. But what if you add the CDN to the element of your page and all you see are black rectangles?

Font Awesome是向网站添加图标的最流行的方法之一。 但是，如果将CDN添加到页面的元素并且看到的只是黑色矩形怎么办？

Here are a couple of things to keep in mind when you add Font Awesome to your next project.

将Font Awesome添加到下一个项目时，需要牢记以下几点。

将链接添加到头部 (Add the link to the head)

Imagine you have the following HTML:

假设您有以下HTML：

Like other CDNs, you need to add a element to the . For Font Awesome 5.7.2, it'll look something like this:

像其他CDN一样，您需要向添加一个元素。 对于Font Awesome 5.7.2，它看起来像这样：

在线与本地 (Online vs local)

If you run the following code in a web based editor like CodePen or CodeSandbox, the following code renders icons properly:

如果您在基于Web的编辑器(如CodePen或CodeSandbox)中运行以下代码，则以下代码将正确呈现图标：

But if you try to open the page locally in a browser, you'll still see the black rectangles instead of the icons:

但是，如果尝试在浏览器中本地打开页面，则仍会看到黑色矩形而不是图标：

Take another look at the href in the element above. Do you see it?

再看一下元素中的href 。 你看到了吗？

The problem is that, when you load the page from your local file system, the browser is trying to find the Font Awesome CSS file at the root of the file system.

问题是，当您从本地文件系统加载页面时，浏览器试图在文件系统的根目录中找到Font Awesome CSS文件。

To get things working online and locally, make sure to add the URL scheme (HTTP, or better, HTTPS) to the href:

为了使事情在网上和本地都能正常工作，请确保将URL方案(HTTP或更好的HTTPS)添加到href ：

这里发生了什么？ (What's going on here?)

When you leave off the URL scheme (href="//use.fontawesome..."), then the browser uses the same URL scheme the page was loaded with.

当您取消URL方案( href="//use.fontawesome..." )时，浏览器将使用与页面加载时相同的URL方案。

So if you run the page locally by running the HTML file in a browser, the href assumes the Font Awesome CSS is also a file that is also saved locally (file:).

因此，如果您通过在浏览器中运行HTML文件在本地运行页面，则href假定Font Awesome CSS也是一个也在本地保存的file: ( file: ：)。

Just make sure the href attributes for your elements all point to the full URL, including the URL scheme, and you should be good to go.

只要确保您元素的href属性都指向完整的URL，包括URL方案，就可以了。

翻译自: https://www.freecodecamp.org/news/how-to-use-font-awesome-v5-7-2-with-html/