Fontawesome Icon Not showing

I tried using a different icon while having the latest version of fontawesome but nothing works

19 Replies

JimsterOP•15mo ago

this is the icon that is being showed instead of the one that i want

Jochem•15mo ago

I'm not familiar with it myself, but 99/100 fontawesome issues I've seen on here is people using paid icons with the free version

JimsterOP•15mo ago

no it shouldnt be it cuz some hours ago they were showing + all of my icons are like this

Jochem•15mo ago

share your code then, especially how you're including FontAwesome and your icons

JimsterOP•15mo ago

JimsterOP•15mo ago

i didnt change anything while they were working and when i checked now they appear like this square thing

Jochem•15mo ago

are you getting any HTTP errors in the network tab of the devtools when you do a cacheless refresh? or any errors at all on the fontawesome URL?

JimsterOP•15mo ago

no, everything works great

Jochem•15mo ago

you'll have to share a live example then

JimsterOP•15mo ago

what should i show?

Jochem•15mo ago

the problem, that's really it. If you have this hosted somewhere, that's fine, otherwise you'll have to either put it up on github pages, codepen, stackblitz. The ideal way to share code for dev help is with a minimal example, so nothing more than what you need to reproduce the problem

JimsterOP•15mo ago

my whole code is this

Jochem•15mo ago

right, so I can't run that I can't even click the link to the cloudflare CDN to see if the css loads, and I'm not going to type that out myself. Please check out #how-to-ask-good-questions

JimsterOP•15mo ago

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- -====FontAwesome====- -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  <body>
    <i class="fa-a fa-accessible-icon"></i>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- -====FontAwesome====- -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  <body>
    <i class="fa-a fa-accessible-icon"></i>
  </body>
</html>

snxxwyy•15mo ago

Create a codepen with it in, https://codepen.io/

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

Jochem•15mo ago

The reason we ask people to create codepens and share live versions isn't because we're being difficult, but the more effort you put into helping others help you, the more likely you are to get an answer. Also, a lot of the time, making the minimal example you need will solve your issue for you, and you learn a ton doing it but anyway, your class should be fa-brands fa-accessible-icon, not fa-a fa-accessible-icon:

<i class="fa-brands fa-accessible-icon"></i>

<i class="fa-brands fa-accessible-icon"></i>

JimsterOP•15mo ago

https://codepen.io/Jimmm88333/pen/rNoprKp

Jim

CodePen

rNoprKp

...

Mannix•15mo ago

you have

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Gluten", cursive;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Gluten", cursive;
}

and that font-family declaration overwrites the one from fontAwesome 🙂

JimsterOP•15mo ago

omg i fixed it thank you so much! btw how do i close the questions i have asked?

Gaming

Programming

Fontawesome Icon Not showing

Did you find this page helpful?