一、先进入网站
进入 icomoon 字库
第一步:点击 :IcoMoon App
第二步:选择图标,并点击:Generate Font
第三步:点击 Download
第四步:将下载文件中的 fonts 文件夹复制到项目根目录下
第五步:打开style.css文件
字体声明,将 style.css
文件中的开头的字体声明代码赋值到 html 中
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?6fzr3v');
src: url('fonts/icomoon.eot?6fzr3v#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?6fzr3v') format('truetype'),
url('fonts/icomoon.woff?6fzr3v') format('woff'),
url('fonts/icomoon.svg?6fzr3v#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
第六步:打开 demo.html
,复制页面中的方框图标到 html 代码中即可。
<body>
<span></span>
<span></span>
</body>
此处复制方框 也可以到官网复制 如下图
第七步:给 span
声明字体:
span{
font-family: 'icomoon';
color: pink;
}
结果 如下图
第八:如何更新/添加字体图标?
上传 selections.json
,添加字体图标,重新生成。下载,更换 @font-face
内容即可