Question

我想在导航栏中的购物车项目旁边添加购物车图片。有没有办法只使用css这样做？我想也许是：在{}某个地方可以工作。

以下是我网站的链接：http://poloniafoods.weebly.com/store/c1/Featured_Products.html

提前致谢，贾斯汀。

Answer 1

您可以将after标签添加到cart li元素。使用带有网址的内容指向图像的绝对路径。根据您想要的结果玩大小和位置。

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

Answer 2

最简单的方法就是使用字体真棒图标。只需在任何需要的地方使用此代码即可。

<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

Answer 3

当然，您可以在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。

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

3 个答案: