Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #1291921

    I am trying to replace the Woocommerce cart image in the right-hand side of the header with FontAwesome.

    I have succeeded, but need help with two little (big?) tweaks:

    1. I need to remove the border around the box surrounding the Cart image. Still have narrow white band/border…not sure what selector to choose to get rid of it!

    2. When I change to FontAwesome Icon from original Enfold cart image, I get a SECOND tiny copy of that Fontawesome icon in front of the counter of the following:

    I would like to get rid of the border and also that second Fontawesome icon.

    Here is the CSS I’m using:

    /*Move cart image to left just a little, leaving tiny margin on right*/

    /*Change Cart image from CART to FontAwesome purse
    If Font-weight is 900, get SOLID purse. If 400, get OUTLINE
    Below is solid, but kinda like outline*/
    a.cart_dropdown_link > span:before {
    content: ‘\f290’!important;
    font-family: ‘Font Awesome 5 Pro’!important;
    font-weight: 900!important;
    /*Woocommerce – Cart — make background same as header. Not sure how to get rid of border thingie. Also increase size of Icon*/
    ul.menu-item.cart_dropdown li.cart_dropdown_first a.cart_dropdown_link{

    /*These are the numbers tiny beside cart. Only colored them to see what they are.*/
    ul.menu-item.cart_dropdown li.cart_dropdown_first a.cart_dropdown_link .av-active-counter{color:red!important;}
    ul.menu-item.cart_dropdown li.cart_dropdown_first a.cart_dropdown_link .av-cart-counter{color:yellow!important;}


    Any ideas, guys?


    Hey CharlieTh,

    Thank you for the inquiry.

    1.) To remove the cart icon border, please use this css code.

    .responsive #top .cart_dropdown {
        border: 0 !important;

    2.) Try to use the first-child selector to target the first span tag inside the cart dropdown link container.

    a.cart_dropdown_link > span:first-child:before {
        content: '\f290' !important;
        font-family: 'Font Awesome 5 Pro' !important;
        font-weight: 100 !important;

    Best regards,


    Marvelous, Ismael! Worked like a dream.
    Thank you so much for taking the time to look at it.
    Now I have another tool in my toolbox for the Awesome Enfold and its Awesome support staff!
    Feel free to close this thread now.

    Appreciate it.



    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

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