自定义字体图标
程序员文章站
2022-05-25 19:05:39
...
一.获取字体图标文件(本案例以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;
}
三.运用定义好的图标
<span class="icon-phone"></span>
<span>关注微信</span>
结果:上一篇: InputStream复用问题
下一篇: PHP调试工具Xdebug装配配置教程