Vue.js项目中使用Iconfont字体图标

进入网站：Iconfont网址：http://www.iconfont.cn点击网站上方的“官方图标库”，选择自己喜欢的图标。在这里我选择天猫的图标库。选择好自己喜欢的图标，你可以有两个选择，下载代码和添加至项目。我们这两选择添加至项目，然后新建项目，并输入名称。项目添加好后，会自动给我们转入到我们项目库中。点击查看在线链接。生产css引入的代码，生成后就可以在项目首页index.html引入

jimjiayu

2909人浏览 · 2018-05-08 15:11:41

jimjiayu · 2018-05-08 15:11:41 发布

进入网站：Iconfont网址：http://www.iconfont.cn
点击网站上方的“官方图标库”，选择自己喜欢的图标。在这里我选择天猫的图标库。
选择好自己喜欢的图标，你可以有两个选择，下载代码和添加至项目。
我们这两选择添加至项目，然后新建项目，并输入名称。
项目添加好后，会自动给我们转入到我们项目库中。点击查看在线链接。
生产css引入的代码，生成后就可以在项目首页index.html引入了。

<link rel="stylesheet" href="http://at.alicdn.com/t/font_657604_xujhsb9zlug3z0k9.css">

图标顺利引入到项目中，已经可以使用它们了，在“我的项目中”你会看到图标的font class值。
这里写图片描述

在需要图标的地方这样写就可以看到效果了

<i class="icon iconfont icon-wode"></i>

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}$/, //不连续的两位字母// /^