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

Question

我想在导航栏中的购物车商品旁边添加一张购物车图片。有没有办法只使用 css 来做到这一点？我想也许 :after {} 某个地方会起作用。

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

提前致谢，贾斯汀

Answer 1

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

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

如果您想增加购物车的尺寸。只需添加一个额外的 class fa-2x

是的，你需要使用 font awesome icon 的 cdn。

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

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

this is their site

Answer 2

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

我建议制作一个 class 而不是使用此 ID。

Answer 3

您可以向购物车 li 元素添加后标记。使用带有 url 的内容指向图像的绝对路径。根据您想要的结果调整大小和位置。

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

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

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

css

image

cart

navigationbar

weebly