一、推荐字体图标的网址
1、https://icomoon.io/ 一个国外的网站,打开的话会有点慢
2、https://www.iconfont.cn/ 阿里巴巴网站,关键是免费的
这两个网址都可以下载字体图标
二、下载字体图标
以icomoon为例
打开之后是这样
之后就可以看见各种各样的图标了,选择你想要的
如果划到最后,没有你想要的,可以点击下面的add icons from library进行添加
添加你想要的
选择完之后,选择生成字体图标
下载得到zip
解压后文件列表如下
至此下载字体图标完成!!!
三、使用字体图标
1、文件列表下的fonts文件夹,复制到页面的同级目录下
2、用记事本打开style.css文件
3、复制选中部分
4、打开文件列表下的demo.html,界面如下,复制你想使用的图标后面的小方框,放入到标签中
5、给span一个font-family: ‘icomoon’;
注意:font-family里面的icomoon要与复制代码的第二行一样即可
最后打开界面,即可成功!!也可以对字体图标进行修改样式
四、代码总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体图标的使用</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?fgdf6x');
src: url('fonts/icomoon.eot?fgdf6x#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?fgdf6x') format('truetype'),
url('fonts/icomoon.woff?fgdf6x') format('woff'),
url('fonts/icomoon.svg?fgdf6x#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
font-size: 50px;
color: pink;
}
</style>
</head>
<body>
<span></span>
<span></span>
</body>
</html>
注意:解压后的文件,不要删掉,后面进行添加新的字体图标还会用到!!!!