Question

我正在一个前端项目中，我必须在页面中加载font awesome图标。我在<head>标签中添加了链接：

<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> 我从这里的另一篇文章中看到过。但是，该图片未加载。这是我第一次使用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中加载字体真棒图标

1 个答案: