MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标

忘是亡心i 2022-04-17 03:35 439阅读 0赞

### MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标 ###

首先介绍介绍一下，前端必备的非常强大的 阿里巴巴矢量图标库：地址是：[http://www.iconfont.cn/][http_www.iconfont.cn]  
这里有丰富，精美，且免费使用的矢量图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70][]

怎么应用到自己的项目中呢？

### 方法一：直接下载，png 格式的图标 ###

提示：可以自选颜色，截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 1][]

### 方法二：下载代码 ###

1.先将想要使用的图标加入购物车

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 2]

2.打开购物车，点击下载代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 3][]

3.下载后是一个压缩包，解压后就可以得到一堆东西：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 4][]

4.这里面有 3 个html 文件，是说明三种常用的使用方法

5.建议使用：symbol 的那个方法  
【注意】：  
1.只需要引入 js 文件到项目中。  
2.需要自己替换 HTML 代码中的 icon-xxx 为最上面该图标的名字，截图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 5]

等等，三种方式，大家可以根据自己的需要选择，具体使用查看，下载代码的 html 文件的详细描述

**【注意】：自己替换 HTML 代码中的 xxx 为最上面该图标的名字**

[http_www.iconfont.cn]: http://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70]: /images/20220417/136cf23c77174d1096416cba27e7f53b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 1]: /images/20220417/9c6a817684604089887fdda4eb4aa7b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 2]: /images/20220417/709e070776524baa8440c2edeb411218.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 3]: /images/20220417/fe1a0299e1af4aa4875807270d8e938c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 4]: /images/20220417/094072057db347e68c7b8c131685c633.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 5]: /images/20220417/9383ad2403454f8eb99508a3890a6c83.png