CSS3 字体图标
利用@font-face规则，可以设置字体图标
优势：字体图标与传统的图标相比，可以随意设置大小，改变颜色。也不用像精灵图那样要计算背景图的位置，十分方便
1.注册字体
font-family: 字体名称
src:字体源文件路径
@font-face {
font-family: \'webfont\';
src: url(\'webfont/webfont.eot\');/* IE9 */
src: url(\'webfont/webfont.eot?#iefix\') format(\'embedded-opentype\'),/* IE6-IE8 */
url(\'webfont/webfont.woff\') format(\'woff\'),/* chrome、firefox */
url(\'webfont/webfont.ttf\') format(\'truetype\'),/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url(\'webfont/webfont.svg#webfont\') format(\'svg\');/* iOS 4.1- */
}
2.应用到元素中
将样式封装到类名iconfont中，哪个元素要应用到它，将将他写入到class属性中,在为其标签设置相应的字符编码
.iconfont{
font-family: "webfont" !important;
}
<span class="iconfont"></span>
3.将字体编码进行封装
Unicode书写不直观，语意不明确，可以将其封装到伪元素中，设定不同的类名使用不同的Unicode即可
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 二维码 */
.icon-erweima:before {
content: "\e600";
}
/* 暂停 */
.icon-zanting::after {
content: "\e7af";
}
使用不同类名来设定不同字体图标
<span class="iconfont icon-zanting"></span>
<span class="iconfont icon-erweima"></span>
4.使用Iconfont-阿里巴巴矢量图标库
使用字体图标的前必须拥有字体图标的文件，这个文件可以去阿里巴巴矢量图标库下载，先注册登陆github的账号，新建项目
可以浏览或者搜索想要的图标，选中后加入购物车，然后将购物车的图标加入到项目中
打开iconfont.css文件，找到应用了新字体的css类名，例如我这里是（可能默认都是这个类名）
.iconfont {
font-family: "iconfont" !important;
}
在要使用字体图标的标签上加上这个css类名，字体编码可以在项目中查看
版权声明：本文为OrochiZ-原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。