字体图标
1.进入iconmoon 选择字体图标 下载解压文件夹
2.css中引入代码
css内联
@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-weight: normal;
font-style: normal;
}
/*注意 要是创建css文件夹 里面的css文件 */
则引入的代码
@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-weight: normal;
font-style: normal;
}
3.将fonts文件夹下载至项目内
4.1打开demo.html 复制小方块 (粘贴之后看不到但是存在)
复制小方块 (粘贴之后看不到但是存在) 加入
<span> </span>
css代码
span{
font-family:"icomoon"; //重点 别忘了
}
4.2打开demo.html 复制小方块之前的数字 例如 eac6
<span></span>
span::before{
content:"\eac6"; //重点 注意是 反斜杠 \
font-family:"icomoon"; //重点 别忘了
}
字体图片追加
1.打开https://icomoon.io/app/#/select
- 将自己的selection.json文件拉拽至箭头处 点击yes
3.追加另外的图标 再次下载解压文件夹 重新替换文件夹 还有 fonts文件夹( 别忘了)