Hey there
Check the Font Awsome docs and ensure you have added the Brands stylesheet : https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Thread Starter
invbr
(@invbr)
Hi @robinrsa , thanks for your attempt to help me.
I checked and I’m following the fontAwesome and Woocommerce doc correctly, but the whatsapp icon doesn’t work, others do!
See my call:
function jk_whatsapp_link() {
echo '<a href="https://api.whatsapp.com/send?phone=55"><i class="fab fa-whatsapp"></i></a>';
}
And CSS:
.storefront-handheld-footer-bar ul li.whatsapp > a::before {
content: "\f232";
}
Can you help me yet?
-
This reply was modified 6 years, 3 months ago by
invbr.
-
This reply was modified 6 years, 3 months ago by invbr.
@invbr
Have you included the Font Awesome brands style sheet to your theme as that appears as to why its not displaying…
Thread Starter
invbr
(@invbr)
I didn’t understand what you meant @robinrsa .
My theme is the pattern of woocommerce.. other icons work, this one doesn’t.
@invbr
So the Font Awesome free version has 2 different styles:
Solid : https://fontawesome.com/icons?s=solid
Brands : https://fontawesome.com/icons?s=brands
It appears that the Brands isn’t included in your theme, as if you tried to used Facebook Icon / Unicode it won’t display either. However if I used an icon from the “solid” icon options it displays, I tried this from my side as well as I see you are now using the comment-dots icon which is part of the Solid icon options.
@invbr
Try adding this code to your current active themes functions.php
Be sure that you are using a child theme as should you update the theme, you don’t want to loose the function.
add_action('wp_head','hook_header');
function hook_header() {
echo '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/brands.css" integrity="sha384-VGCZwiSnlHXYDojsRqeMn3IVvdzTx5JEuHgqZ3bYLCLUBV8rvihHApoA1Aso2TZA" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/fontawesome.css" integrity="sha384-GVa9GOgVQgOk+TNYXu7S/InPTfSDTtBalSgkgqQ7sCik56N9ztlkoTr2f/T44oKV" crossorigin="anonymous">';
}
Thread Starter
invbr
(@invbr)
Hi @robinrsa, i understand now, thanks
However, it still didn’t work. I added this code in a snippet and the icon still doesn’t appear.
I also got a code straight from fontawesome and it didn’t work either.
What am I doing wrong? How can I load this whatsapp icon ..
I already searched the internet and didn’t find the solution, see, it’s the same problem: https://github.com/woocommerce/storefront/issues/913
Thread Starter
invbr
(@invbr)
I got it!
The font-family attribute with the Brands value was missing from the CSS.
https://fontawesome.com/how-to-use/with-the-api/setup/configuration
Thank you @robinrsa !!!
Plugin Support
Yuki K a11n.
(@yukikatayama)
Automattic Happiness Engineer
This looks to be resolved so I will close the thread for now!
@invbr I don´t understad the solution, Could you explain it in detail?
