Changing Icons on Cart Checkout Page

  • Posts: 440
  • Thank you received: 20
  • Hikashop Essential
5 years 6 months ago #306836

-- HikaShop version -- : 4.0.3
-- Joomla version -- : 3.9.6

Hi

I would like to change the icons on the cart/checkout page. For the delete icon I see <i class="fa fa-times-circle"> I would like to change it to <i class="fa fa-trash " > or at least have a trash icon instead. I would appreciate it if someone could point me in the right direction for me to make the change.

Thanks

Dave

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
5 years 6 months ago #306847

Hi,

You don't need to change the HTML / class to do that.
You can do that by just adding a bit of CSS on your website. For example, for the cart view of the checkout:

.hikashop_checkout_cart .fa-times-circle:before {
    content: "\f1f8" !important;
}
f1f8 is the actual character code for the fa-trash icon.
If you look with your browser developer tools, you can get the value in the before of the fa i tag:
monosnap.com/file/jjPZWTebVTWwwchoNXZyeZFpm8DrjL
How to add CSS to HikaShop:
www.hikashop.com/support/documentation/1...ize-the-display.html

The following user(s) said Thank You: davec

Please Log in or Create an account to join the conversation.

  • Posts: 130
  • Thank you received: 2
  • Hikashop Business
5 years 4 months ago #308626

Hi, I have the same wish, but I really need to change the code, since I don't use Fontawesome. Can you tell me which view to edit?

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
5 years 4 months ago #308660

Hi,

If you want to change the view, then you can do that via the menu Display>Views.
If you're using the new checkout it will be the "show_block_cart" view file.
Note that you can easily know which view file you need to edit for any place in HikaShop thanks to the "Display view files" setting of the HikaShop configuration.

You can read more about all this here:
www.hikashop.com/support/documentation/1...-display.html#layout

The following user(s) said Thank You: simonkloostra

Please Log in or Create an account to join the conversation.

  • Posts: 28
  • Thank you received: 3
  • Hikashop Business
4 years 11 months ago #313608

Hello, same same, but can't find the good arguments :

Trying to change the

.fa-shopping-cart

To Unicode: f291

??
Thanks

Edit : after trying and trying !

.hikabtn .fa-shopping-cart:before {
    content: "\f291" !important;
}

Last edit: 4 years 11 months ago by LaMarelle. Reason: Solution found !
The following user(s) said Thank You: nicolas

Please Log in or Create an account to join the conversation.

Time to create page: 0.079 seconds
Powered by Kunena Forum