Vue如何添加iconfont库图标以及怎样添加新图标

vue添加iconfont库到项目一、打开iconfont官网iconfont二、选择自己想要图标加入购物车三、打开购物车，把图标添加至项目，没有项目的可以建一个，名称自定义四、可以选择第二种形式，操作比较容易五、可以添加图标的前缀，以免和ElemetUI的图标冲突六、点击下载至本地七、下载之后，解压到本地，结构大概是这样的。八、在assets新建一个icon文件把解...

看了就会懂

4183人浏览 · 2020-03-31 21:15:15

看了就会懂 · 2020-03-31 21:15:15 发布

vue添加iconfont库到项目

一、打开iconfont官网
iconfont

二、选择自己想要图标加入购物车
在这里插入图片描述

三、打开购物车，把图标添加至项目，没有项目的可以建一个，名称自定义
在这里插入图片描述
四、可以选择第二种形式，操作比较容易

五、可以添加图标的前缀，以免和ElemetUI的图标冲突

六、点击下载至本地

在这里插入图片描述

七、下载之后，解压到本地，结构大概是这样的。
在这里插入图片描述

八、在assets新建一个icon文件把解压好的放入里面
在这里插入图片描述

九、在iconfont.css加入如下代码
在这里插入图片描述


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

这些就是你所添加的一个个图标啦，可以在这里自定义样式
十、在main.js全局引入

import "./assets/icon/iconfont.css"

（也可以单独在需要的文件导入）

十一、点击复制图标代码
在这里插入图片描述

十二、把复制的代码引入到vue就可以用啦
用i标签，前面一定要加iconfont，不然可能不起作用哦

vue添加新的图标到项目

一、选择想要添加的图标到项目
在这里插入图片描述
二、重新下载项目到本地，不过这回不是覆盖，而是替换

在这里插入图片描述

三、把解压的iconfont.css的这段代码替换你原来的iconfont.css的代码
最新解压的
替换后的
四、新的图标就可以用啦！觉得文章用的，可以点个赞，支持下哦，谢谢！
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^