Icons are now updated to Font Awesome 5, and they have a different syntax. So if you’ve added an icon anywhere manually, you’ll have to update the code
From:
<i class="fa fa-accessible-icon"></i>
<i class="fab fa-accessible-icon"></i>
for brands
and
from fa to faS for other icons
-
This reply was modified 2 years, 4 months ago by
Pluh.
Hi there,
as Pluh said, the font awesome icon set is now updated to Font Awesome 5.
You can find how to use the Font Awesome 5 icons, for your custom icons, on the official website
https://fontawesome.com/
Hope this helps.
My problem is with CSS. I have this code:
#w4_post_list-2 h3:before {
font-family: ‘Font Awesome 5 Free’;
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
padding-right: 5px;
top: 1px;
font-size: 1em;
position: relative;
content: ‘\f005’;
}
With \f005 it works (it shows a star), but not with another ones (for example, \f05a for info circle).
I have same issue as @candreu
As a temp fix, I disabled FA in customizr and put this in functions.php
//enqueues our external font awesome stylesheet
function enqueue_our_required_stylesheets(){
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');
Would still love to get suggestions from some css masters.
Hi there,
Font Awesome 5 solid icons “need” the font-weight to be set to 900.
The info circle icon, as you can see here:
https://fontawesome.com/icons/info-circle?style=solid
is a solid icon.
Hope this helps.
Thank you, it was the solution. One more thing: which is the value for font-weight with brands icons?
For me the problem went away, when checking the box in WP Dashboard
Appearance -> Customizr -> Advanced Options -> Front end icons ( Font Awesome )
as suggested in:
http://docs.presscustomizr.com/article/233-social-icons-showing-up-as-squares
Tnx marpat! So simple 😉
You are welcome! Simple indeed – finding it, not so simple 😉
Why did it work without checked box in versions before? I do not know…
Thank you – the fix for me was to turn on the FA icons in the Advanced Options! Weird, I wasn’t having issues though when I first installed Customizr but I’ve made some changes since then.
I was still seeing issues but I removed the minify CSS scripts that I set up last night and it seemed to fix the issues. I have so much going on between memcached, Cloudflare, etc. that I’m guessing something stepped on something else.
