Font Awesome Showing Boxes Instead Of Icons - Stack Overflow

Trang chủ » Html Css Icon Box » Font Awesome Showing Boxes Instead Of Icons - Stack Overflow

Có thể bạn quan tâm

    1. Home
    2. Questions
    3. Tags
    4. Users
    5. Companies
    6. Labs
    7. Jobs
    8. Discussions
    9. Collectives

    10. Communities for your favorite technologies. Explore all Collectives

  2. Teams

    Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

    Try Teams for free Explore Teams
  3. Teams

  4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Font Awesome showing boxes instead of icons Ask Question Asked 3 years, 6 months ago Modified 9 months ago Viewed 2k times 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.
  • html
  • css
  • font-awesome
  • meta-tags
  • font-awesome-5
Share Improve this question Follow edited Mar 18, 2024 at 20:35 TylerH's user avatar TylerH 21.2k76 gold badges79 silver badges110 bronze badges asked Jun 29, 2021 at 14:13 Satyam Mishra's user avatar Satyam MishraSatyam Mishra 708 bronze badges 4
  • The error file says it isn't compatible, which is your Windows version? – Harsh Commented Jun 29, 2021 at 14:16
  • @Harsh Windows 10 21h1 – Satyam Mishra Commented Jun 29, 2021 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++ can convert from ANSI into UTF-8 for you (Encoding -> Convert to UTF-8). You can set UTF-8 as default. – Peter Pointer Commented Jun 29, 2021 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 Commented Jun 30, 2021 at 2:13
Add a comment |

3 Answers 3

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 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...(:

Share Improve this answer Follow edited Jun 30, 2021 at 6:15 answered Jun 29, 2021 at 14:33 Harsh's user avatar HarshHarsh 1001 silver badge10 bronze badges 6
  • I had all the hopes that this would work but it didn't! What the heck! – Satyam Mishra Commented Jun 30, 2021 at 2: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 Commented Jun 30, 2021 at 6:08
  • Thanks for being active in this thread... Can I know where use the tags i.e. inside <head> or <html> 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) and the output screenshot is here which is obvious when you look at the code. – Satyam Mishra Commented Jun 30, 2021 at 12:07
  • 1 maybe try this last one, <meta http-equiv="Cache-control" content="public" max-age="31536000"> i've not added 'immutable' in this since its not supported in chrome... – Harsh Commented Jun 30, 2021 at 14:22
  • 1 Oh, hope you find a solution, your welcome (: @SatyamMishra – Harsh Commented Jun 30, 2021 at 14:41
| Show 1 more comment 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) Share Improve this answer Follow answered Jun 29, 2021 at 14:31 DafuQi's user avatar DafuQiDafuQi 1284 bronze badges 1
  • Thanks for the reply... But I already tried the transformations you suggested and also my webpage starts with doctype html. Thanks! – Satyam Mishra Commented Jun 29, 2021 at 15:18
Add a comment | 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

Share Improve this answer Follow answered Jun 29, 2021 at 14:32 JCrook's user avatar JCrookJCrook 4695 silver badges7 bronze badges 1
  • 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 Commented Jun 29, 2021 at 15:23
Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid …

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged
  • html
  • css
  • font-awesome
  • meta-tags
  • font-awesome-5
or ask your own question.

  • The Overflow Blog
  • Developers want more, more, more: the 2024 results from Stack Overflow’s...
  • How AI apps are like Google Search
  • Featured on Meta
  • The December 2024 Community Asks Sprint has been moved to March 2025 (and...
  • Stack Overflow Jobs is expanding to more countries

Linked

400 What is "X-Content-Type-Options=nosniff"? 0 Font-Awesome Icons coming as Box 3 Font Awesome Showing Box instead of Icons 0 Font Awesome icons not showing 2 FontAwesome showing squares, not icons 13 Font-Awesome icons showing up as square boxes 0 Font awesome icons don't appear 3 Font Awesome Icons not appearing 0 Font-awesome icon displays a box 0 font awesome icons showing as a blank square 0 Font awesome icons are showing up as blank squares?

Hot Network Questions

  • What is the provenance of "A fox jumped up one winter's night"?
  • Pull Chances for Powerups in Mario Kart 8 Deluxe
  • How can I repair a damaged vinyl window lifting fin?
  • 80-90s sci-fi movie in which scientists did something to make the world pitch-black because the ozone layer had depleted
  • Mama’s cookies too dry to bake
  • Convergence to a Lipschitz function
  • Color disappears when I create a node group (CTRL+G)
  • How to check if current font is a particular family and shape?
  • Pete's Pike 7x7 puzzles - Part 3
  • What is the correct way to uninstall software on Windows?
  • Test To Destruction - short story (not the Keith Laumer one)
  • Why does one have to avoid hard braking, full-throttle starts and rapid acceleration with a new scooter?
  • Is it possible to get symbolic integral for this?
  • On a light aircraft, should I turn off the anti-collision light (beacon/strobe light) when I stop the engine?
  • Where is it midnight?
  • References to "corn" in translations of the Jiuzhang Suanshu
  • Why is the United Kingdom often considered a country, but the European Union isn't?
  • How can an unaffiliated researcher access scholarly books?
  • Not submitting separate transcripts for colleges all on one transcript
  • Identifying data frame rows in R with specific pairs of values in two columns
  • Structure of Bellman equation and time indexes
  • Reduce white space between title and plot when adding marginal plot to ggplot2
  • How can point particles be Lorentz Contracted?
  • Why is "white noise" generated from uniform distribution sometimes autocorrelated?
more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html

Từ khóa » Html Css Icon Box