iconfont使用详细步骤

灰太狼 2022-12-23 13:25 285阅读 0赞

1、使用说明：[https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code][https_www.iconfont.cn_help_detail_spm_a313x.7781069.1998910419.d8d11a391_helptype_code]

2、查找具体想要的icon图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

3、查找到需要的图标后，点击下载按钮，进入下载页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

如果单张下载的话，可以直接点击最下方那排，选择自己想要下载的格式。

如果想要将这个图标库所有图标都下载下来，可以点击右侧的图标库。

4、下载多个图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

将想要下载的图片加入购物车，然后点击购物车，可以一起下载素材

5、下载到本地

先下载这个库的所有图标

[https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=11553][https_www.iconfont.cn_collections_detail_spm_a313x.7781069.0.da5a778a4_cid_11553]

先全部加入购物车

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3][]

然后打开购物车，下载素材，会显示一次最多只能下载20个图标哦

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4][]或者选择添加至项目![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 5][]添加到项目后，可以点击下载到本地

6、修改下来的文件

下载下来的是一个压缩包，解压之后，里面还嵌套了一个文件夹。

在本地项目中新建一个文件夹，然后将之前那个下载下来的本地图标里面的五个文件复制到该新建的文件夹内，iconfont.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff

iconfont.css内需要修改一下引用的url链接地址，修改的五个地方如下图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 6][]

7、应用

在我的项目中引入这个css文件，然后使用标签，classname应该加上前置iconfont，然后再加上你想要引用的表情的class名称。class名称可以通过查看刚刚下载下来的图标的名称。

import './App.css';
    import React, { Component } from 'react'
    import './iconfont/iconfont.css';
    class App extends Component {
      render() {
        return (
          <div className="App">
            <div className="iconfont icon-bukaishi"></div>
            <i className="iconfont icon-cry"></i>
          </div>
        );
      }
    }
    
    export default App;

8、 问题

![2020112515201460.png][]

第一次的时候，图标显示图上的样子。问题是，该图库不允许使用。资源库有问题。然后我换了另外一个资源库就OK了

[https_www.iconfont.cn_help_detail_spm_a313x.7781069.1998910419.d8d11a391_helptype_code]: https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20221120/0b033dd64a13459dacd48dc960f607b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: /images/20221120/bee82e4dc9494909926db92c6e796d25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: /images/20221120/2d309bd3e6144ffcab55fde16132b4dc.png
[https_www.iconfont.cn_collections_detail_spm_a313x.7781069.0.da5a778a4_cid_11553]: https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=11553
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201125113658893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201125114325790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201125141713753.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201125162858333.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[2020112515201460.png]: https://img-blog.csdnimg.cn/2020112515201460.png