Avada Forums Community Forum Custom CSS

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • michaelhermanns
    Participant
    Post count: 3

    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
    Keymaster
    Post count: 140

    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
    Participant
    Post count: 3

    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
    Participant
    Post count: 3

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.