CSS字体图标

下载一个字体图标

这里以阿里巴巴矢量图标库为例

选择自己需要的图标，并添加入库

下载代码下载到本地

解压后文件内容如图所示

将字体引入CSS文件

@font-face {
    font-family: "email";
    src: url('./fonts/iconfont.eot');
    src:
        url('./fonts/iconfont.eot?#iefix') format('embedded-opentype'),
        url('./fonts/iconfont.woff2') format('woff2'),
        url('./fonts/iconfont.woff') format('woff'),
        url('./fonts/iconfont.ttf') format('truetype'),
        url('./fonts/iconfont.svg') format('svg');
}

打开文件中的demo.html，记下字体Unicode代码

定义字体类

.icon-email {
    font-size: 32px;
}
/*最好用伪元素来放图标，也可以按照demo中的来*/
.icon-email::before {
    content: "\e631";
    font-family: 'email';
}

引入到HTML中

效果如下：