Replace cart “remove item” from X to fontawesome

  • zaredesign

    (@zaredesign)


    3 years, 5 months ago

    Hello.
    Page: kaguhostel.ee
    Passwd: kaguHostel2020

    How to replace cart remove item “x” with custom fontawesome icon?

    I found this code: 

    /* Hide the "x" */

a.remove {
text-indent: -9999px;
border: 0;
}

/* Add a Fontawesome icon instead */
/* Learn More in the Following Paragraphs */

a.remove:before {
font-family: FontAwesome;
content: "\f1f8";
float: left;
text-indent: 0;
}

    But it seems to be outdated or does not work for me due theme / plugins.
    It adds FontAwesome icon so second part of code works but first one (removing “x”) does not work.
    IMG: https://imgur.com/tJPA8qb

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support Senff – a11n

    (@senff)

    3 years, 5 months ago

    Hey @zaredesign

    The code you mentioned above seems to be correct, but you need to make sure that the font file itself is loaded as well.

    Since your site is behind a password page, I’m not able to see if that’s the case or not.

    Thread Starter zaredesign

    (@zaredesign)

    3 years, 5 months ago

    There is password in the post:
    kaguHostel2020

    Cart is “ostukorv”

    FontAwesome icon loads perfectly. 

    a.remove {
text-indent: -9999px;
border: 0;
}

    this does NOT work for me

    • This reply was modified 3 years, 5 months ago by zaredesign.
    • This reply was modified 3 years, 5 months ago by zaredesign.
    Thread Starter zaredesign

    (@zaredesign)

    3 years, 4 months ago

    Anyone some ideas?

    robertght

    (@robertghetau)

    3 years, 3 months ago

    Hi there,

    I’ve worked on the following bit that you can use to hide the X button:

    
.remove font {
    display: none;
}

    Also, if you’d like to center that new icon, you can use the text-indent set to 24px:

    
a.remove:before {
font-family: FontAwesome;
content: "\f1f8";
float: left;
text-indent: 24px;
}

    I hope this helps!

    robertght

    (@robertghetau)

    3 years, 3 months ago

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

    Thread Starter zaredesign

    (@zaredesign)

    3 years, 3 months ago

    Hello, text-indent set it to center but

    .remove font {
    display: none;
}

    does not work, X won’t dissapear

    robertght

    (@robertghetau)

    3 years, 3 months ago

    Hey,

    I’m not able to see the cart section anymore on your site.

    May I know if it was removed yet or is there a way to directly check that page again?

    Finally, may I know if you tried using the code above in this form?

    
.remove font {
    display: none !important;
}

    Cheers

    Thread Starter zaredesign

    (@zaredesign)

    3 years, 3 months ago

    Hello!

    Sorry, added cart back (removed it) but it’s visible only in estonian page (cart – ostukorv)

    Yes i tried code you gave, it did not work or do anything.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Replace cart “remove item” from X to fontawesome’ is closed to new replies.