字体图标使用教程
字体图标
-
打开字体图标网站 https://icomoon.io/（与阿里图标库区别：1.不用账号 2.图标有json文件保。各有优缺点，自行选择）
-
点击 IcoMoon App按钮
-
点击左上角New Empty Set 按钮
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gWbsDePH-1647513778349)(2.jpg)]](https://file.cfanz.cn/uploads/jpeg/2022/03/20/0/KMF81cWUQc.jpeg)
-
将准备好的字体图片拖入Untitled Set
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eb4hJHyB-1647513778349)(3.jpg)]](https://file.cfanz.cn/uploads/jpeg/2022/03/20/0/7c886SaO80.jpeg)
-
选择需要生成的字体图标
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ylnqTbm8-1647513778349)(4.jpg)]](https://file.cfanz.cn/uploads/jpeg/2022/03/20/0/6M71766b65.jpeg)
-
修改字体图标名称
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o67BBfJR-1647513778350)(5.jpg)]](https://file.cfanz.cn/uploads/jpeg/2022/03/20/0/OQ33031QZb.jpeg)
-
也可以设置字体图标前缀与后缀（1、点击设置 2、设置前后缀、3、下载包名称 注：此步骤非必须）
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3hupkQGs-1647513778350)(6.jpg)]](https://file.cfanz.cn/uploads/jpeg/2022/03/20/0/AR9f1639C3.jpeg)
-
下载字体图标
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ikaciaVx-1647513778350)(7.jpg)]](https://file.cfanz.cn/uploads/jpeg/2022/03/20/0/7BS69cFa5L.jpeg)
-
解压字体压缩包
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1T0KbRTw-1647513778351)(8.jpg)]](https://file.cfanz.cn/uploads/jpeg/2022/03/20/0/511e05ec7S.jpeg)
-
selection.json 放到项目中，这是所有的字体图标，后期增加字体图标时，可以直接导入（重要文件）
-
项目中引入字体图标
style.css与fonts文件夹放到项目css文件中
-
项目中使用（类名在style.css中）
<i class="icon-icon-search"></i>
