字体图标详细记录

网址：https://icomoon.io/

1、上传.svg文件

设计人员会给我们一个.svg的文件
（1）

image.png

（2）选择要上传的文件

image.png

image.png

2、下载图标

鼠标单击选择要下载的图标

image.png

image.png

3、使用文字图标

解压后

image.png

fonts文件内容

image.png

（1）将fonts文件复制到我们的项目中

image.png

（2）在css中声明字体

image.png

@font-face {
     font-family: 'myfont'; 注释：这个是字体的名称，可以改变
     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）好，既然我们已经声明并指定字体了，那么该输入什么内容显示图标呢？
之前我们下载了压缩包，解压后打开里面的demo.html

• 第一个用法
  image.png
  
  

  ---

  
  
  image.png

• 第二个用法

  
  
  image.png
  
  
  image.png

4、追加新图标到原来库里面（拓展）

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做
答：进入https://icomoon.io/，把压缩包里面的selection.json 上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。

image.png

image.png

image.png