图片当图标使用

情景：最近用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的学习