Why the font awesome icons are not working?
Question
I dont know what details do you need. Code is very simple.
<!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>
details details details details details details details details details
4 answers
solution1
3 2021-01-07 16:42:00
change fab to fa . you need to use font-awesome version 5 to use fab
<i class="fa fa-facebook" aria-hidden="true"></i>
or use font-awesome 5 cdn link
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css
solution2
2 2021-01-07 16:43:23
fab is not included in the 4.7.0/css/font-awesome.min.css .
Consider using up-to-date 5.15.1 cdn link (provided by 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>
solution3
0 2021-01-07 16:46:44
use latest CSS and 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>
solution4
-1 2021-01-07 16:46:49
You have to get the CDN link from the Font Awesome site. This is what it looks like:
<script src="https://kit.fontawesome.com/9375920.js" crossorigin="anonymous"></script>
(Don't use this one, the ID in there is not valid). Include it in the head of your code and it should work fine.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.