Shopping cart icon in header?

[focusingresources]

Hi there,
We use 1shoppingcart for ecommerce. I was wondering if it was possible to add a cart icon to our header and have it link to a specific URL where people could see their cart contents? I’m not sure how to replace social icons in the header, but I was thinking using one of the font awesome icons (  fa-shopping-cart () ) would do the trick… Is this possible?
(www.focusingresources.com)

Thank you!
Maggie

[Cosmin – SUPPORT]

Hi Maggie,

Our themes don’t use Font Awesome 4 yet, so fa-xxx-xx won’t work.

You could change the “Header Phone Number Text” (Pinpoint Options/Header Options) from this:

Give us a call: 510-225-0690

to this:

Give us a call: 510-225-0690 <br><br><a href="http://link.com" style="text-decoration:none;"><i class="icon-shopping-cart icon-large"></i></a>

Regards,

————————————————————————————————————

Cosmin – Support

[focusingresources]

Fantastic, thank you! Is it possible to change the color of the icon?

Warmly,
Maggie

[Melanie – SUPPORT]

Try modifying the style=”…” value to

style="text-decoration:none;color:black!important;"

Cheers 🙂

[focusingresources]

Hi Melanie,
Thanks, that didn’t seem to do anything. I’m wondering what the code above assumes as far as what my color choice would be…
Thanks,
Maggie

[Cosmin – SUPPORT]

Hi Maggie,

You don’t see any difference, because the color is still black 🙂

Let’s have it more customizable; change the code above that I gave you, with this:

Give us a call: 510-225-0690 <br><br><a href="http://link.com" class="header-cart-link"><i class="icon-shopping-cart icon-large"></i></a>

Then, add this in the Custom CSS from the General theme options:

.header-cart-link i { color: #FF0000 !important; }

That would change ONLY the icon color, to a bright red. And you can adjust that color as you please. Hope this helps.

Regards,

————————————————————————————————————

Cosmin – Support

[focusingresources]

Thanks so much, this is great! You guys are awesome.
~Maggie

[focusingresources]

Actually, one more question: is there any way to make it bigger? Like instead of large maybe I can do 2x? or x-large? I just don’t know what the code is…
Thanks again!

[Cosmin – SUPPORT]

Sorry for the delay, you would just need to add CSS to alter the font size, i.e. replace the second line of code in my last reply, with:

.header-cart-link i { color: #FF0000 !important; font-size: 20px !important; }

Adjust 20px as needed.

Regards,

————————————————————————————————————

Cosmin – Support