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
Solution 1 :
Solution 2 :
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>Solution 3 :
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>Solution 4 :
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.
Problem :
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
Comments
Comment posted by Nico Haase
What about some information about your problem?
Comment posted by Rodrigo RamÃrez.
Hmm, if you set wrong the
Comment posted by epascarello
fab is version 5… you are using version 4
Comment posted by yourcodeisshit
Thank you, but on their website it was fab :0
Comment posted by Nico Haase
Please add some explanation to your answer such that others can learn from it
Comment posted by kit.fontawesome.com/7b7972335d.js
This is what it looks like: