CODEWITHSUNDEEP
htmlcssfont-awesomemeta-tagsfont-awesome-5
Satyam Mishra
Satyam Mishra

Reputation: 80

Font Awesome showing boxes instead of icons

I was creating a web project, and until today I have been creating web projects on Android (Acode App). I always use font awesome in my projects, but this time I am on a PC running Microsoft Edge (I know Edge's not the best for debugging) and I created the project in vs code and added the font awesome CSS link from w3schools.com as I usually do but it shows me rectangles then I also tried adding font awesome CSS link from cdnpkg.com but the result is same. Here's my <head> (also check for <meta> errors):

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/style.css">
<title>Document</title>
</head>

Also, I checked if the FontAwesome CSS is loaded in the web browser and it was loaded and applied correctly (as checked on sources tab in developer options window). How I used:

<body>
    <i class='fa fa-twitter'></i>
</body>

I also tried changing font-family to 'FontAwesome', 'FontAwesome 5 Free', ... and the font-weight is normal.

Here are the issues (issues panel in developer options) in my project for reference:

The 'x-ua-compatible' meta element should not be specified as it is not needed.
A 'cache-control' header is missing or empty.
FontAwesome: Static resources should use a 'cache-control' header with 'max-age=31536000' or more.
FontAwesome: Static resources should use a 'cache-control' header with the 'immutable' directive.
Response should include 'x-content-type-options' header.

Upvotes: 0

Views: 1884

Answers (3)

Harsh
Harsh

Reputation: 100

This will work! Remove this line from your <header> :

<meta http-equiv="X-UA-Compatible" content="IE=edge">

And add this:

<meta http-equiv="Cache-control" content="public">
<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />

Explanation: The first error is pretty self-explanatory as it is not needed,

Secondly, cache-control is required to hold instructions...

I am not very familiar with the X-content thing (you can read more about it here) but it is required according to your console error, remove that line if font awesome still doesn't load.

The meta errors will surely be cleared though! Hope this was helpful!

EDIT: Use this in your code, it may or may not work...

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=31536000, public, immutable"
</FilesMatch>

This much can solve the Cache errors your browser is giving because of static elements...Try it and let me know if it works...(:

Upvotes: 1

JCrook
JCrook

Reputation: 469

I have 2 suggestions for this. First, is to check you are not overwriting the entire web page font family e.g:

* {
   font-family: 'sans-serif' !important; 
}

if so remove this and apply font-family to the needed assets rather than the whole page and be sure !important tag isn't used.

SECOND:

you could try creating a local directory to save and load the font-awesome stylesheet and fonts rather than loading them via CDN/URL

Upvotes: 0

DafuQi
DafuQi

Reputation: 128

for the error i guess you are missing something

Then i just tried twitter ones from the site it give me also square, and, with this one its ok, may you try?

<i class="fas fa-times" style="color: red"></i>

here is the code you are missing i think

<!doctype html>

<html lang="fr">

</html> (at the end)

Upvotes: 0

Related Questions