font-awesome css 文件不工作，但 font-awesome CDN 工作。如何？答案

【问题标题】：font-awesome css file not working but font-awesome CDN works. How?font-awesome css 文件不工作，但 font-awesome CDN 工作。如何？
【发布时间】：2021-05-23 17:43:47
【问题描述】：

当我使用 font-awesome css 文件时，图标不显示，但是当我使用 CDN 并且所有代码相同时，它可以工作。如何？请有人告诉我。我的代码是：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<!-- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> -->
<title>Test Page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>

【问题讨论】：

自托管 CSS 文件是否 404'ing？

标签： html css font-awesome-4

【解决方案1】：

基本上，您可能忘记在项目结构中添加字体文件夹，这就是它不起作用的原因。

查看图片。我在名为webfonts 的文件夹中添加了字体，它工作得很好，没有文件夹它甚至无法工作。

这里是谈论hosting font awesome yourself的官方文档，它将解释它是如何工作的，如何设置和使用它。它易于阅读且非常简单。

<head>
  <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fal fa-user"></i> <!-- uses light style -->
  <!--brand icon-->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

现在，如果您遇到问题，它应该可以正常运行。请参考我在此答案中添加的文档链接。

最后我想说的是，他们确实会不时更改类名，并且从一个版本到另一个版本，您还应该从官方网站fontawesome offical查看类名，以确保您符合所有更改的日期。

【讨论】：

【解决方案2】：

我不知道我是否做了什么，但有 3 辆车出现了，所以这一定意味着什么哦，如果您尝试制作一种字体风格的作品（如 Comic sans），某些网络浏览器不运行它们，或者它是 pc 类型或其他东西

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<title>Test Page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>```

【讨论】：