自定义字体图标

一.获取字体图标文件（本案例以icomoon为例）

1）访问：http://f2er.club/

2）选择：框架库

3）选择：icomoon

4）选择图标或者导入自己的图标生成文件：

5）下载生成的文件：

得到：icomoon.zip

解压：

6）将fonts的文件夹复制到自己项目

二.引用字体图标库

@font-face {font-family:icomoon;src: url('../fonts/icomoon.eot') format('embedded-opentype'),url('../fonts/icomoon.svg') format('svg'),url('../fonts/icomoon.ttf') format('truetype'),url('../fonts/icomoon.woff') format('woff');
}
[class^="icon-"],
[class*=" icon-"]{font-family: icomoon;font-style: normal;
}
.icon-phone::before{content: "\e938";font-size: 13px;
}

三.运用定义好的图标

关注微信

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！