0

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.
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Satyam Mishra
  • 70
  • 8
  • The error file says it isn't compatible, which is your Windows version? – Harsh Jun 29 '21 at 14:16
  • @Harsh Windows 10 21h1 – Satyam Mishra Jun 29 '21 at 14:17
  • Is your HTML document saved in UTF-8? Just declaring it in the `head` does not make it UTF-8, you also have to convert it. For example, [Notepad++](https://notepad-plus-plus.org/downloads/) can convert from ANSI into UTF-8 for you (*Encoding* -> *Convert to UTF-8*). You can set UTF-8 as default. – Peter Krebs Jun 29 '21 at 14:51
  • VS Code's status bar says 'UTF-8' which clarifies that the file is utf-8 encoded. Also checking the file for charset on an online platform tells that the file US-ASCII encoded which is a subset of UTF-8. – Satyam Mishra Jun 30 '21 at 02:13

3 Answers3

1

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...(:

Harsh
  • 100
  • 1
  • 10
  • I had all the hopes that this would work but it didn't! What the heck! – Satyam Mishra Jun 30 '21 at 02:15
  • 1
    OK, @SatyamMishra I might have one more trick in my pocket let me see if that works, I'll edit my answer please check the edited update... – Harsh Jun 30 '21 at 06:08
  • Thanks for being active in this thread... Can I know where use the tags i.e. inside `` or `` or anywhere else. Well I tried in head element but still no outcomes... but VS code is flagging it as a syntax error ([See Screenshot](https://imgur.com/a/cpTFAv8)) and the output screenshot is [here](https://imgur.com/a/qsMOlAI) which is obvious when you look at the code. – Satyam Mishra Jun 30 '21 at 12:07
  • 1
    maybe try this last one, i've not added 'immutable' in this since its not supported in chrome... – Harsh Jun 30 '21 at 14:22
  • Thanks for trying to help me but still it didn't work.... I appreciate your work. – Satyam Mishra Jun 30 '21 at 14:35
  • 1
    Oh, hope you find a solution, your welcome (: @SatyamMishra – Harsh Jun 30 '21 at 14:41
0

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)
DafuQi
  • 138
  • 4
  • Thanks for the reply... But I already tried the transformations you suggested and also my webpage starts with doctype html. Thanks! – Satyam Mishra Jun 29 '21 at 15:18
0

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

JCrook
  • 411
  • 3
  • 7
  • Thanks for your suggestions... I tried the first method, but unfortunately it didn't work for me. I would appreciate your second suggestion but I would rather like to work with cdn servers instead storing font-awesome css on my server because the cdn servers are very fast and my server would probably not have that speed. Thanks! – Satyam Mishra Jun 29 '21 at 15:23