字体图标使用教程
-
打开字体图标网站 https://icomoon.io/（与阿里图标库区别：1.不用账号 2.图标有json文件保。各有优缺点，自行选择）
-
点击 IcoMoon App按钮
-
点击左上角New Empty Set 按钮
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gWbsDePH-1647513778349)(2.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/6547f8fd40880cc07d31162d042446ed.png)
-
将准备好的字体图片拖入Untitled Set
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eb4hJHyB-1647513778349)(3.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/a4ab61821c9f7b8f590cab2c96a0174e.png)
-
选择需要生成的字体图标
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ylnqTbm8-1647513778349)(4.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/36118034226b0d561a35d85d4fd673a9.png)
-
修改字体图标名称
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o67BBfJR-1647513778350)(5.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/131ac16fb4c97e107dfa80f058b9024d.png)
-
也可以设置字体图标前缀与后缀（1、点击设置 2、设置前后缀、3、下载包名称 注：此步骤非必须）
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3hupkQGs-1647513778350)(6.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/ba1d7e42fd4699e33f3ffb6c330160e0.png)
-
下载字体图标
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ikaciaVx-1647513778350)(7.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/5c22af0c4ecd91c0e0d2d42f2494e8a0.jpeg)
-
解压字体压缩包
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1T0KbRTw-1647513778351)(8.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/bd964827a5dfd73c159881c2b14f1e63.jpeg)
-
selection.json 放到项目中，这是所有的字体图标，后期增加字体图标时，可以直接导入（重要文件）
-
项目中引入字体图标
style.css与fonts文件夹放到项目css文件中
-
项目中使用（类名在style.css中）
<i class="icon-icon-search"></i>
1538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
