码神之路博客系统更换个人卡片图标（iconfont 阿里巴巴矢量图标库的使用）

目录

个人卡片图标

更换步骤

1.前往iconfont 阿里巴巴矢量图标库官网，并且注册账号；

2.点击资源管理下的我的项目：

 3.点击新建项目：

4.新建项目之后，在搜索框搜索想要的图标素材（例如QQ）：

 5.编辑素材

6.下载至本地

7.下载后解压，并将解压后的文件中的内容替换掉博客系统中blog-app\src\assets\icon下的内容

8.在CardMe.vue前端文件下使用即可

实现效果

---

个人卡片图标

 即这个位置的QQ等图标，对它进行更换需要使用iconfont 阿里巴巴矢量图标库

更换步骤

1.前往iconfont 阿里巴巴矢量图标库官网，并且注册账号；

官网：iconfont 阿里巴巴矢量图标库

2.点击资源管理下的我的项目：

 

 3.点击新建项目：

 项目名称随意，前缀建议使用默认（icon-）

4.新建项目之后，在搜索框搜索想要的图标素材（例如QQ）：

 选中自己想要的素材，点击添加购物车

单击右上角购物车图标：

添加至项目，并且选择刚才新建的项目：

 5.编辑素材

在我的项目中，选中目标素材点击编辑

 主要是编辑Font Class / Symbol，方便后续使用

6.下载至本地

7.下载后解压，并将解压后的文件中的内容替换掉博客系统中blog-app\src\assets\icon下的内容

8.在CardMe.vue前端文件下使用即可

  class与第五步对应素材编辑的名称一致即可(记得加上前缀，我这里前缀使用的默认：icon-)

实现效果