欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

自定义字体图标

程序员文章站 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>
结果:自定义字体图标