为什么字体很棒的图标不起作用

我不知道你需要什么细节。代码非常简单。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<ul class="sci">
<li><a href="#"><i class="fab fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-vk" aria-hidden="true"></i></a></li>
</ul>
</body>
</html>

细节细节细节细节详情细节细节细节

将fab更改为fa。你需要使用字体真棒版本5使用fab

<i class="fa fa-facebook" aria-hidden="true"></i>

或使用字体真棒5 cdn链接

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css

fab不包含在4.7.0/css/font-awesome.min.css中。

考虑使用最新的5.15.1cdn链接(由cdnjs.com提供(：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<ul class="sci">
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-vk" aria-hidden="true"></i></a></li>
</ul>

使用最新的CSS和JS。

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" integrity="sha512-F5QTlBqZlvuBEs9LQPqc1iZv2UMxcVXezbHzomzS6Df4MZMClge/8+gXrKw2fl5ysdk4rWjR0vKS7NNkfymaBQ==" crossorigin="anonymous"></script>
</head>
<body>
<ul class="sci">
<li><a href="#"><i class="fab fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-vk" aria-hidden="true"></i></a></li>
</ul>
</body>
</html>

您必须从Font Awesome网站获取CDN链接。这就是它的样子：

<script src="https://kit.fontawesome.com/9375920.js" crossorigin="anonymous"></script>

(不要使用这个，里面的ID无效(。将它包含在代码的头中，它应该可以正常工作。

相关内容

最新更新

热门标签：