使用阿里巴巴矢量图标库
引入iconfont,在阿里巴巴iconfont新建自己的项目,上传svg格式的icon。项目会生成iconfont的代码
@font-face { font-family: 'iconfont'; /* project id 759319 */ src: url('//at.alicdn.com/t/font_759319_280b9mztj7j.eot'); src: url('//at.alicdn.com/t/font_759319_280b9mztj7j.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_759319_280b9mztj7j.woff') format('woff'), url('//at.alicdn.com/t/font_759319_280b9mztj7j.ttf') format('truetype'), url('//at.alicdn.com/t/font_759319_280b9mztj7j.svg#iconfont') format('svg'); }
设置字体
.icon{ font-family: 'iconfont'; font-style: normal; font-weight: normal; line-height: 1; color: #b2b2b2; font-size: 16px; &-close:before{ content: 'e600'; } &-home:before{ content: 'e614'; } }
在html中引入
<i class="icon icon-close"></i>
ps:每次上传新icon之后需要重新生成引入的iconfont代码,如果是本地引入,需要重新下载替换。