如何制作图标字体？svg矢量格式-图标字体?追加

1.网站

https://icomoon.io/app/#/select

2.左上角 Import Icons 按钮

3.选中要导入的svg按钮，选择右下角的Generate Font F！

4.download就可以下载了，

5.然后导入common下面的fonts文件夹放入和html在同一个目录下.

6.在下载的文件中style.css中复制,粘贴到自己的css文件中

字体声明:

@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?muejnj');
src: url('fonts/icomoon.eot?muejnj#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?muejnj') format('truetype'),
url('fonts/icomoon.woff?muejnj') format('woff'),
url('fonts/icomoon.svg?muejnj#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

7,在标签中加入小框框,小框框在demo.html中复制

<span></span>

 

8.span声明字体(保证span的字体和声明中第一行的字体是一致的)

span{

　　font-family: 'icomoon';

}

9,有效果了!!!

 

10.如果要追加字体图标,点击左上角Import Icons 把压缩包里面的selection.json重新上传,然后选中自己想要的图标,重新下载压缩包,并替换原来的fonts文件夹!