element集成第三方icon图标

旧城等待， 2023-09-23 18:10 49阅读 0赞

### 引言 ###

### 集成阿里图标库 ###

1.  进入阿里icon，新建项目
    
    ![image-20221202212050172][]
2.  选择一个自己喜欢的icon库，将里面的图标加入购物车中
    
    > 因为没有批量导入购物车，所以一般情况下需要一个一个去点，太浪费时间，那么请在控制台输入以下代码，批量导入
    > 
    >     var icons = document.querySelectorAll('.icon-gouwuche1');
    >     
    >     var auto_click = function(i) {
    >             
    >     	if (i < icons.length){
    >             
    >     		setTimeout(function() {
    >             
    >     			icons.item(i).click(); 
    >     			auto_click(i + 1); 
    >     		}, 600); 
    >     	} 
    >     };
    >     auto_click(0);
    
    ![image-20221202213730995][]
3.  添加icon到项目中
    
    ![image-20221202215554515][]
    
    ![image-20221202215621197][]
4.  设置Font class，然后下载至本地
    
    ![image-20221202215735976][]
5.  在项目src -> assets 目录下，新建一个icon 文件夹
    
    > 把下载下来的项目里面的文件拷贝到icon文件夹(拷入如下文件即可)
    
    ![image-20221202221232180][]
6.  修改inconfont.css文件
    
    > 解压后修改其中iconfont.css文件,在iconfont.css文件中添加如下代码：
    
        /* 引入ali-icon */
        [class^="icon-blog"],
        [class*=" icon-blog"]
        {
              
          font-family: "iconfont" !important;
          font-size: 18px;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
    
    **注意：el-icon-ali是你之前设置的icon前缀，第二个el-icon-ali前边有空格的**
    
    ![image-20221202224948415][]
7.  在main.js里边把css引进来，全局引入
    
        import '@/assets/icon/iconfont.css'
8.  打开在阿里icon的项目，复制你需要的图标代码
    
    ![image-20221202225052187][]
9.  项目中使用
    
        <el-button icon="icon-bloghome"  size="small" circle @click="updateNum"></el-button>
        <i class="icon-bloghome"></i>

[image-20221202212050172]: https://img-blog.csdnimg.cn/img_convert/1c7b16249f13418dedbc2a1f669022a2.png
[image-20221202213730995]: https://img-blog.csdnimg.cn/img_convert/7ede269ce0b8941f9b1ca81e4e3a6665.png
[image-20221202215554515]: https://img-blog.csdnimg.cn/img_convert/2bfcf3f2bf0afa04c938ac5518ec6080.png
[image-20221202215621197]: https://img-blog.csdnimg.cn/img_convert/21f124d38f8fd0f4873672e47e182cb7.png
[image-20221202215735976]: https://img-blog.csdnimg.cn/img_convert/f103e0e6be7eaf4817570c8a0149280c.png
[image-20221202221232180]: https://img-blog.csdnimg.cn/img_convert/dbe5deee9f0f792bff24b4cc48e3020f.png
[image-20221202224948415]: https://img-blog.csdnimg.cn/img_convert/6ee7f699336f92d6194a9c16f31315c4.png
[image-20221202225052187]: https://img-blog.csdnimg.cn/img_convert/93e0902790b69aad2e4e9be6659a8a65.png