字体图标----------前端必备良药

字体图标

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

2. 将自己的selection.json文件拉拽至箭头处 点击yes

3.追加另外的图标 再次下载解压文件夹 重新替换文件夹 还有 fonts文件夹（ 别忘了）