Font awesome is not showing icon

Question

I am using Font Awesome and do not wish to add CSS with HTTP. I downloaded Font Awesome and included it in my code, yet Font Awesome is showing a bordered square box instead

Answer 1

i was dealing with the same problem then i figured it out i have to use new version (5 and plus)

use this cdn it will work.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">

Answer 2

In my case: You need to copy the whole font-awesome folder to your project css folder and not just the font-awesome.min.css file.

Answer 3

i was facing the same issue.. so instead of downloading font awesome , i added a link in my html code and it worked.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Answer 4

solved changing the targetted !importantized font-family selector from * { ... } to *:not(i) { ... }

(with scss preprocessor); hope u solved

Answer 5

All the above are correct however on top of that my issue was that I downloaded the free version of FA5 which doesn't have:

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

I could not get v5 to work so I reverted to 4.7.0 with the help of the posts above and it fixed my issue.

Answer 6

my issue was the one having most of the votes

*{
font-family: xxxxx
}

changing it to this solved the problem

body{
font-family: xxxx
}