icon does not work

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

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 5 years ago by invbr.
• This reply was modified 5 years 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…

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">';
}

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

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

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?