情景：最近用Element UI组件上的图标或者font-awesome小图标
但是这样远不能满足ui的审美，会说你没按设计图实现。
之前的做法：登陆自己阿里图标库账号，把想用的图标添加进项目库，里面有可以生成对应图标的代码 再在页面上使用对应的代码就可以出现对应的图标。
当然这样大家都是会的 而且阿里图标库也有教程。我这里是想实现类似Element ui把图标改成添加一个类名就可以的那种：具体也简单
.icon-organize {
display: inline-block;
&::before {
display: block;
content: '';
width: 15px;
height: 15px;
background: url(对应图片地址) no-repeat;
background-size: auto 13px;
}
}
这样声明之后使用
<i class="icon-organize"></i> 就实现了图标用类名实现 然后我又发现这样的图片是死的 不会变颜色 比如要有点击效果：
那就在父元素类名下增加
&father：hover{
.icon-organize {
&::before {
background: url(点击后效果图片) no-repeat;
background-size: auto 13px;
}
}
}
最近忙于VUE的学习