0

我想在导航栏中的购物车项目旁边添加购物车图像。有没有办法只使用css来做到这一点？我想也许 :after {} 某处会起作用。

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

在此先感谢贾斯汀。

4

3 回答 3

1

您可以将 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-06T15:36:35.257 回答
0

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

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

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

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

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

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

这是他们的网站

于 2016-09-06T15:31:52.927 回答
0

当然，您可以在 CSS 中使用背景图像。

例如

#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-06T15:32:01.013 回答