使用css伪类before与after为wordpress追加阿里图库小图标的办法菜鸟详细教程

开发wordperss主题或者是woocommerce主题的时候，会发现许多钩子与函数输出的都不是单纯的数据，而是带有各种css样式与html，我们又不能像其他cms一样轻松的套模板了，这时候在不改动原有的html结构的前提下，只能通过改动css来美化。那么追加图标就是一个非常重要的方法。

一起来看下解决办法：

首先，要找到要追加的css，我们可以使用谷歌开发者工具，去找位置，点击右键-检查：

然后我们选中这个css类，这里比如选中sku_wrapper这个类，

span.sku_wrapper:before {

      content:'\e602';
    font-family: iconfont;
    font-size: 20px;
    position:relative;
    top:3px
}

那么这个content后边的内容，其实就是这个小图标了，它需要我们去阿里图库里边先收藏到项目：

然后打开项目，选择Unicode方式查看图标，即可看到图标码：

比如小车的图标，我们将content:’\e647′;即可。

完毕了吗？当然没有，最后你还需要引入阿里巴巴图标库的在线地址到css,地址就在：

将它复制到你的主CSS文件最上方即可。

此方法可以为wordpress许多地方追加小标，比如菜单栏目，wordpress的导航菜单开发非常反人类，谁搞都觉得麻烦，所以使用这种方式追加小标就很方便了。