如何使用阿里巴巴矢量图标 夏漱石的博客-CSDN博客

本文非常详细地讲解了如何在HTML页面中使用阿里巴巴矢量图标库

下面我们讲解一下在vue页面中引入阿里巴巴矢量图标库图标的几种方法。

目录

1.引入在线链接

1、vue中第九步链接引入应该在入口文件index.html中引入

2.使用时可以在任何vue页面的标签中使用，如下所示

2.下载png

1. 按照上述方法将其保存到项目中。

2. 将鼠标悬停在所需的图标上阿里巴巴矢量图标网站，然后单击下载。

3.选择png下载

4、放到vue项目的src/下合适位置

5.设置页面样式

6.标签介绍

7. 页面显示

1.引入在线链接

这个方法和在HTML页面中使用阿里巴巴矢量图标库几乎是一样的。 博客条目是：

如何使用阿里巴巴矢量图标 夏漱石的博客-CSDN博客

只需修改以下步骤即可：

1、vue中第九步链接引入应该在入口文件index.html中引入

2.使用时可以在任何vue页面的标签中使用，如下所示

2.下载png 1.按照上面的方法保存到项目中 2.将鼠标悬停在需要的图标上，点击下载

3.选择png下载

4.放到vue项目的src/下合适位置 5.设置页面样式

.logo {
      top: 9px;
      left: 9px;
      margin-right: 10px;
      width: 30px;
      height: 30px;
      // border-radius: 4px;
      background: url("../assets/images/mulu2.png") no-repeat;
      background-size: contain;
    }

6.标签介绍

7. 页面显示

注意：

方法1中引入的矢量图像可能是黑白的阿里巴巴矢量图标网站，颜色可以在样式中自定义。

本站对作者上传的所有内容将尽可能审核来源及出处，但对内容不作任何保证或承诺。请读者仅作参考并自行核实其真实性及合法性。如您发现图文视频内容来源标注有误或侵犯了您的权益请告知，本站将及时予以修改或删除。