CODEWITHSUNDEEP
htmlfont-awesome
user13711618
user13711618

Reputation:

Why the font awesome icons are not working?

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

Upvotes: 0

Views: 6444

Answers (4)

CoderLean
CoderLean

Reputation: 232

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.

Upvotes: -1

mehmetx
mehmetx

Reputation: 860

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

Upvotes: 2

Rajen Trivedi
Rajen Trivedi

Reputation: 1302

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>

Upvotes: 0

0stone0
0stone0

Reputation: 43884

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>

Upvotes: 3

Related Questions