无法在 html 中加载很棒的字体图标

Question

我正在做一个前端项目，我必须在我的页面中加载 font awesome 图标。我在我的 <head> 标签中加入了 link :

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

然后我尝试在我的 html 中加载一张图片，比如 <span class="focus-input100 fa"></span> 这是我从另一个 post 那里看到的。但是图片无法加载。这是我第一次使用 font awesome，非常感谢您的帮助。

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

<span class="focus-input100 fa">&#xf095;</span>

编辑：我检查页面控制台并发现错误：

Refused to apply style from 'http://127.0.0.1:5500/HTML_FILES/cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/%E2%80%A6' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Answer 1

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i><br/>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i><br/>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>

无法在 html 中加载很棒的字体图标

unable to load font awesome icons in html

html

css

font-awesome