Custom CSS

[michaelhermanns]

#527902

I have the following code in my custom css:

.fusion-rollover-content .fusion-product-buttons a:first-child::before {
content: '\f270' !important;
font-family: FontAwesome !important;
}
.product-buttons .add_to_cart_button::before, .product-buttons .product_type_external::before, .product-buttons .product_type_simple::before {
content: '\f270' !important;
font-family: FontAwesome !important;
}

This should show the Amazon Icon (FontAwesome) on the WooCommerce Product Buttons. It worked a long time but actually it doesn’t. There is just a placeholder instead of the Amazon Icon. Can anyone help?

[Shaminder]

#527938

Hi

We need to ensure that the CSS rule we are using doesn’t not make use of the old font family name for font awesome. Avada has now moved to font awesome 5. Version 5 of font awesome uses a different font family name

I would request you to please use the following font family name along with the font-weight in the following manner
​

.fusion-rollover-content .fusion-product-buttons a:first-child::before {
content: '\f270' !important;
font-family: ‘font awesome 5 free’ !important;
​font-weight: 900 !important;
}

.product-buttons .add_to_cart_button::before, .product-buttons .product_type_external::before, .product-buttons .product_type_simple::before {
content: '\f270' !important;
font-family: ‘font awesome 5 free’ !important;
​font-weight: 900 !important;
}

Note that the Avada community forum is primarily for a user to user interaction.

If you would like hands-on assistance here, please register for support and create a support ticket as explained here -> https://theme-fusion.com/avada-doc/getting-started/avada-theme-support

Thank you!

Shaminder

[michaelhermanns]

#528048

That seems to be the main issue, but the icon f270 (Amazon) still doesn’t work. Other icons work now. Could you please advice? Many Thanks!

[michaelhermanns]

#528494

Problem solved! The font-family has to be ‘font awesome 5 brands’.

[Author]

Posts