H5生成字体图标方法

Dear 丶 2022-09-25 12:23 136阅读 0赞

**根据美工提供的.svg文件生成字体图标并应用，留着后用**

**借助一个在线生成工具：**[https://icomoon.io/app/\#/select][https_icomoon.io_app_select]

### 1、进入网址：主页面 ###

![这里写图片描述][20160909171635034]

### 2、新建一个图集 ###

![这里写图片描述][20160909171739331]

### 3、添加.svg图片（可以使用现成的，也可以使用自定义的） ###

**使用现成的点击页面红色的Add Icons…**

**使用自定义的.svg文件直接拖拽进图集即可添加**

![这里写图片描述][20160909171904113]

![这里写图片描述][20160909172014739]

**（1）可以自由命名**

![这里写图片描述][20160909172124643]

**（2）修改完成后，点击生成Font**

![这里写图片描述][20160909172205269]

**（3）下载到压缩文件：**

![这里写图片描述][20160909172244035]

**（4）运用：将fonts文件夹全部内容和style.css文件放到相应的项目中。**

![这里写图片描述][20160909172316489]

**（5）根据css文件下面生成的class类的名称添加到html对应的节点上即可添加字体。**

**当然添加字体还需要设置font-size，也可以根据实际情况设置color改变其颜色。**

![这里写图片描述][20160909172400928]

相应实例下载地址：[http://download.csdn.net/detail/u013938465/9434357][http_download.csdn.net_detail_u013938465_9434357]

转载地址：[http://blog.csdn.net/u013938465/article/details/50680468][http_blog.csdn.net_u013938465_article_details_50680468]

--------------------

[https_icomoon.io_app_select]: https://icomoon.io/app/#/select
[20160909171635034]: /images/20220717/ddcb8aa47d2b417ead8d7aadab3510b0.png
[20160909171739331]: /images/20220717/72e4d8f867fb4a9e89cc95db3427cd9b.png
[20160909171904113]: /images/20220717/8697347605c34fceb2a4693ba07f06a9.png
[20160909172014739]: /images/20220717/c954339edc47431ab2290baf5ecd0c37.png
[20160909172124643]: /images/20220717/aa7a29b51c184f6c9f6d97988f004fc6.png
[20160909172205269]: /images/20220717/dfebc3620a38431a84244ac60d6e3ee4.png
[20160909172244035]: /images/20220717/d1df7cb8387944049be5228dc8ed00f5.png
[20160909172316489]: /images/20220717/b9d75008a5ce4427b339ce80535e9c26.png
[20160909172400928]: /images/20220717/4d0f4e6b72c94fbdb368bdf93caf1d60.png
[http_download.csdn.net_detail_u013938465_9434357]: http://download.csdn.net/detail/u013938465/9434357
[http_blog.csdn.net_u013938465_article_details_50680468]: http://blog.csdn.net/u013938465/article/details/50680468