Vue项目中引用font-awesome图标库

下载从官网下载压缩包，我下载的是font-awesome-4.7.0，解压后copy到vue项目的static目录下，打开font-awesome-4.7.0文件夹，发现有css,fonts,less,scss等目录，我们只需要css和fonts目录，其余的删除不要。使用在main.js中引用cssimport '../static/font-awesome-4.7.0/css/f...

程序员白彬

3435人浏览 · 2018-09-19 09:21:18

程序员白彬 · 2018-09-19 09:21:18 发布

下载

从官网下载压缩包，我下载的是font-awesome-4.7.0，解压后copy到vue项目的static目录下，打开font-awesome-4.7.0文件夹，发现有css,fonts,less,scss等目录，我们只需要css和fonts目录，其余的删除不要。

使用

在main.js中引用css

import '../static/font-awesome-4.7.0/css/font-awesome.min.css'

在vue页面测试

<i class="fa fa-rocket"></i>

可以看到字体图标已经成功应用。

fa火箭图标

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