wordpress WooCommerce在菜单按钮上添加购物车符号

百度了好多添加购物车符号的办法,都说是在阿里云字体库里实现,比较麻烦。我参考他们的办法后,找出以下办法,供以后参考。

1、在仪表盘——外观——自定义里,找到额外CSS.

加入以下CSS代码:

@font-face {
font-family: 'FontAwesome';
src: url('https://cdn.staticfile.org/font-awesome/4.7.0/css/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('https://cdn.staticfile.org/font-awesome/4.7.0/css/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn.staticfile.org/font-awesome/4.7.0/css//https://cdn.staticfile.org/font-awesome/4.7.0/css/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn.staticfile.org/font-awesome/4.7.0/css/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn.staticfile.org/font-awesome/4.7.0/css/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn.staticfile.org/font-awesome/4.7.0/css/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:
grayscale;
}

即引用了https://cdn.staticfile.org的字体。也可以把这些文件下载到本地用。

2、在http://www.runoob.com/font-awesome/fontawesome-reference.html,找到购物车所对应的unicode是

3、在仪表盘——外观——菜单里找到购物车子菜单,在导航标签里写上“<i class=”fa”></i>所有产品”

保存后重新打开网页,发现购物车子菜单上有了购物车图标。

 

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注