CODEWITHSUNDEEP
cssimagecartnavigationbarweebly
justinpees
justinpees

Reputation: 420

How can I add an image of a cart in my navigation using only css?

I'd like to add an image of a cart next to my cart item in my navigation bar. Is there any way of doing this using only css? I thought maybe a :after {} somewhere would work.

Here is the link to my site: http://poloniafoods.weebly.com/store/c1/Featured_Products.html

Thanks in advance, Justin.

Upvotes: 0

Views: 2693

Answers (3)

dbochen
dbochen

Reputation: 252

You can add an after tag to the cart li element. Use content with a url to point to an absolut path of an image. Play with the size and positioning depending on your desired outcome.

.wsite-nav-cart:after {
    content: url('http://placehold.it/50');
    position: absolute;
    right: 0;
    top: 0;
    height: 10px;
    width: 10px;
}

Upvotes: 1

Paul Redmond
Paul Redmond

Reputation: 3296

Sure, you can use a background image in CSS.

E.g.

#wsite-nav-cart-a {
    position: relative;
    background: url(http://www.clker.com/cliparts/U/D/n/G/6/h/white-shopping-cart-md.png) 2px 8px no-repeat;
    background-size: 20px;
    padding-left: 30px;
}

I would suggest making a class rather than using this ID.

Upvotes: 0

flatbreadcandycane
flatbreadcandycane

Reputation: 365

The easiest way to do it to just use font awesome icons. Just use this code wherever you need it to be.

<i class="fa fa-shopping-cart" aria-hidden="true"></i>

and if you want to increase the size of the cart. just add an additional class fa-2x

and yeah, you need to use the font awesome icon's cdn.

Just go to their website and you'll get the cdn. Just add it like this before your <html> tag like the below script tag.

<script src="https://use.fontawesome.com/someUniqueId.js"></script>

this is their site

Upvotes: 0

Related Questions