字体icomoon下载使用步骤

最新推荐文章于 2025-11-09 00:42:25 发布

原创最新推荐文章于 2025-11-09 00:42:25 发布 · 7.1k 阅读

3 ·

CC 4.0 BY-SA版权

前端编写专栏收录该内容

7 篇文章

订阅专栏

本教程详细介绍了如何从icomoon网站下载并使用图标字体。首先，访问icomoon.io，选择需要的图标并生成；接着下载并解压文件，将fonts文件夹放入项目，并在页面中引入字体；然后，通过demo.html复制小图标，并将svg转换为图标字体。最后，学会如何添加新图标到现有库。

部署运行你感兴趣的模型镜像

1.进入网站

http://icomoon.io

2.点击

3.选择想要的图标，点击生成

4.下载

5.解压

6.打开demo.html 复制小图标

7.复制fonts文件夹到项目中，在页面中引入字体

@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-style: normal;  /*倾斜字体正常*/
}

8.将svg格式图片，转化为图标字体