iconfont引入 - 爱码网

使用阿里巴巴矢量图标库

引入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代码，如果是本地引入，需要重新下载替换。