如何使用css在我的导航中添加购物车图像？

我要在我的导航栏中在我的购物车项目旁边添加购物车图像。有没有什么办法只使用CSS来做到这一点？我想也许是：在{}之后的某个地方工作。如何使用css在我的导航中添加购物车图像？

这里是链接到我的网站：http://poloniafoods.weebly.com/store/c1/Featured_Products.html

在此先感谢，贾斯汀。

2016-09-06 justinpees

之后将工作，或者你可以做它的CSS背景。 – Vcasso

预计你至少试图为自己编码。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您尝试过的以及为什么它不起作用。 –

同时，这个问答对初学者编码者来说可能相当有帮助。 – justinpees

您可以将一个after标签添加到购物车li元素。使用带有URL的内容指向图像的绝对路径。根据您想要的结果播放大小和位置。

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

来源

2016-09-06 15:36:35 dbochen

最简单的方法来做它只使用字体真棒图标。只要你需要它，就使用这个代码。

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

如果你想增加购物车的大小。只需添加一个额外的类fa-2x

是的，你需要使用字体真棒图标的CDN。

只要去他们的网站，你会得到CDN。只需在您的<html>标记之前像下面的脚本标记一样添加它即可。

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

this is their site

来源

2016-09-06 15:31:52 puneeth8994

当然，你可以在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; 
}

我会建议做一个类而不是使用这个ID。

来源

2016-09-06 15:32:01

如何使用css在我的导航中添加购物车图像？

回答

相关问题