element中使用阿里的矢量图标

素颜马尾好姑娘i 2023-06-12 09:59 21阅读 0赞

项目当中有个安全帽管理，现在用到的是element，但是发现这个框架里边带的没有帽子的图标，所以就去阿里下载了一个。具体的使用方法如下

# 1. 在[阿里icon][icon]上创建一个给element扩展的项目 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70][]

按照上图中的步骤，创建一个element扩展icon项目，**注意第4点**

# 2. 添加icon到项目中 #

在图标库中找到你想要的icon后，加入购物车，然后点击右上角的购物车，把icon添加到你的element扩展项目里吧~

![20191112161154187.png][]

# 3. 生成icon的在线css链接 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1][]

# 4. 在Vue项目中，引用在线css链接和新建css样式文件 （**重点**） #

**4.1 在Vue项目中创建iconfont.css文件，当然名字自定义。**

[class^="el-icon-ali"], [class*="el-icon-ali"]
    {
      font-family:"iconfont" !important;
      font-size:16px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

这里的 el-icon-ali 是我自己起的icon前缀名。

**4.2 引用阿里项目在线的css链接**

我是在index.html里面引用的。放在前面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2][]

**4.3 引用自己创建的css文件（我是在main.js里引入的）**

**![20191112161534456.png][]**

** 4.4 可以在项目中使用你的icon啦~~~~**

[icon]: https://link.jianshu.com/?t=http%3A%2F%2Ficonfont.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191112161050983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ==,size_16,color_FFFFFF,t_70
[20191112161154187.png]: https://img-blog.csdnimg.cn/20191112161154187.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191112161226482.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191112161440672.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ==,size_16,color_FFFFFF,t_70
[20191112161534456.png]: https://img-blog.csdnimg.cn/20191112161534456.png