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