Changing the Cart Icon on Boundless theme? Driving me nuts!

Changing the Cart Icon on Boundless theme? Driving me nuts!

PrimeBeast7
Excursionist
24 1 10

I just can't find the solution to this anywhere!

However I do know exactly where to alter code for a new Cart Icon: .icon-cart:before { content: "\e600"; }

I've messed around with the code 'e600' and managed to get different icons, but none of them were the one I'm looking for. I just want to have a Bag instead of a Cart!

So my question is where can I find the codes for all the icons available because I'm convinced there's a Bag Icon somewhere in my backend.

Under Assets, I can see icons.tff, icons.woff, icons.eot and icons.json but when I click on them they're all blank!!

Please help its getting frustrating! Thanks

Replies 2 (2)

ArsBnd
Visitor
2 0 0

👋

Faced with the same problem. I'm going to test this example now. I'll give you an answer later. In the meantime, look at it.

www.huratips.com/tech-tips/how-to-add-font-awesome-to-your-shopify-store

ArsBnd
Visitor
2 0 0

Create a file in Snippets> icon.liquid

{% if icon == 'cart' %}
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path d="M16 6v-2c0-2.209-1.791-4-4-4s-4 1.791-4 4v2h-5v18h18v-18h-5zm-7-2c0-1.654 1.346-3 3-3s3 1.346 3 3v2h-6v-2zm10 18h-14v-14h3v1.5c0 .276.224.5.5.5s.5-.224.5-.5v-1.5h6v1.5c0 .276.224.5.5.5s.5-.224.5-.5v-1.5h3v14z"/></svg>
{% endif %}

{% if icon == 'hamburger' %}
<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M16 12c0-1.656 1.344-3 3-3s3 1.344 3 3-1.344 3-3 3-3-1.344-3-3zm1 0c0-1.104.896-2 2-2s2 .896 2 2-.896 2-2 2-2-.896-2-2zm-8 0c0-1.656 1.344-3 3-3s3 1.344 3 3-1.344 3-3 3-3-1.344-3-3zm1 0c0-1.104.896-2 2-2s2 .896 2 2-.896 2-2 2-2-.896-2-2zm-8 0c0-1.656 1.344-3 3-3s3 1.344 3 3-1.344 3-3 3-3-1.344-3-3zm1 0c0-1.104.896-2 2-2s2 .896 2 2-.896 2-2 2-2-.896-2-2z"/></svg>
{% endif %}

 

Open header.liquid and find:

<span class="icon icon-cart" aria-hidden="true"></span>

 

Below paste the following code:

<span aria-hidden="true">{% include 'icon' with 'cart' %}</span>

 

For example:

photo_2021-06-04_18-43-46.jpg

 

END.

 

Create your own snippet for each icon:

{%- if icon == 'NAME**' -%}
  <svg></svg>
{%- endif -%}

 

U find the .svg codes on the internet.

 

Peace