MyBB Community Forums

Would anyone happen to know why Font Awesome won't allow me to upload different icons?

I have these on my index which are working perfectly fine:



But then on my Profile, It only shows up as an empty square box like this:



Any idea why?

Generally blank box appears when font-awesome is not loaded correctly.
May be in your index the font-awesome.css link path is correct but in other pages the link is breaking for some reason.

There might be some other causes as well, for instance if your other pages have some strict font overriding rule like this:

*{
    font-family: 'Some Font' !important;
}

However a link to the exact problematic page may be handy to investigate the root cause...

(2018-03-11, 05:30 AM)effone Wrote: [ -> ]Generally blank box appears when font-awesome is not loaded correctly.
May be in your index the font-awesome.css link path is correct but in other pages the link is breaking for some reason.

There might be some other causes as well, for instance if your other pages have some strict font overriding rule like this:

*{
    font-family: 'Some Font' !important;
}

However a link to the exact problematic page may be handy to investigate the root cause...

Oh wow, there's a username I haven't seen in a while.

I'll pm you a link to check it out.

In first glance I can see your code:

<i class="fas fa-eye" ....

Change the class 'fas' to 'fa'

<i class="fa fa-eye" ....

and the icon appears ...

(2018-03-11, 06:02 AM)effone Wrote: [ -> ]In first glance I can see your code:

<i class="fas fa-eye" ....

Change the class 'fas' to 'fa'

<i class="fa fa-eye" ....

and the icon appears ...

Oh wow, that must be the problem everywhere then. I don't get why though, I copied the code as it was on the site. But okay thanks got it working.

For your understanding:
The font-awesome css loads the font through class '.fa'. If you look into the loaded v4.7 css:

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

The class '.fas' you used is for font-awesome version 5 (represents solid type of icon.) In version 5 there are 4 types of icons: Solid (.fas), Regular (.far), Light (.fal) and Brands (.fab). As you are using version 4 (not 5) you have to strictly use '.fa' class.