icomoon字体图标的使用方法
2021-01-23 本文已影响0人
周星星的学习笔记
一、访问网址：https://icomoon.io/
二、选择icon图标
三、下载图标
image.png
四、使用
1.下载下来，解压之后，进入目录中，copy里面的fonts目录到工程中。
image.png
2.打开demo.html
3.编辑代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>icon font test</title>
<style>
@font-face {
/*声明字体 引用字体*/
font-family: "icomoon";
/*我们自己起名字可以*/
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-style: normal;
/*倾斜字体正常*/
}
span {
font-family: "icomoon";
font-size: 100px;
}
</style>
</head>
<body>
<!-- 将复制的放入这里 -->
<span></span>
</body>
</html>
4.结果显示
