MyBB Community Forums
Font-Awesome not showing Correctly? - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: 1.8 Support (https://community.mybb.com/forum-175.html)
+--- Forum: General Support (https://community.mybb.com/forum-176.html)
+--- Thread: Font-Awesome not showing Correctly? (/thread-216282.html)



Font-Awesome not showing Correctly? - Kioshi - 2018-03-10

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:

[Image: 4GX4iDY.png]

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

[Image: OZNHzDb.png]

Any idea why?


RE: Font-Awesome not showing Correctly? - effone - 2018-03-11

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


RE: Font-Awesome not showing Correctly? - Kioshi - 2018-03-11

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


RE: Font-Awesome not showing Correctly? - effone - 2018-03-11

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

[Image: Untitled_2.png]


RE: Font-Awesome not showing Correctly? - Kioshi - 2018-03-11

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

[Image: Untitled_2.png]

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.


RE: Font-Awesome not showing Correctly? - effone - 2018-03-11

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.