vue使用最新版font-awesome字体图标库（内附花式玩法）

安装安装基础依赖：进入 Vue 项目文件夹，执行如下命令安装基础依赖库。npm i --save @fortawesome/fontawesome-svg-corenpm i --save @fortawesome/vue-fontawesome安装样式依赖Font Awosome 为我们提供了 Solid、Regular、Brands 这三种免费样式（日常使用完全足够）npm i...

monkey-jie

8322人浏览 · 2019-08-15 21:20:05

monkey-jie · 2019-08-15 21:20:05 发布

安装

安装基础依赖：

进入 Vue 项目文件夹，执行如下命令安装基础依赖库。

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/vue-fontawesome

安装样式依赖

Font Awosome 为我们提供了 Solid、Regular、Brands 这三种免费样式（日常使用完全足够）

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

如果速度太慢，就用cnpm吧

在项目的main.js中加入以下配置；

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText }
 from '@fortawesome/vue-fontawesome'
 
library.add(fas, far, fab)
 
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)
Vue.component('font-awesome-layers-text', FontAwesomeLayersText)

样式介绍

上面提到 Font Awosome 为我们提供了三种免费的样式，使用时分别对应不同的前缀。

solid 样式，前缀为：fas
regular 样式，前缀为：far
brands 样式，前缀为：fab

它们提供的所有图标可以进入官方的图标搜索页进行查看

官网

基本用法

显示图标

我们使用 font-awesome-icon 标签来显示图标，icon 属性中可以设置样式前缀、以及图标名字。

<font-awesome-icon :icon="['fas', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['fab', 'accessible-icon']" />

如果是 solid 样式（前缀为：fas），则前缀可以省略。比如上面第一个图标等效下面写法：

<font-awesome-icon icon="square" />

设置图标大小

默认情况下图标和当前文字的大小是一样的。我们可以通过 size 属性在此基础上作调整，该属性支持多种类型的设置方式。
在这里插入图片描述

<font-awesome-icon icon="chess-knight"  />
<font-awesome-icon icon="chess-knight" size="xs" />
<font-awesome-icon icon="chess-knight" size="lg"  />
<font-awesome-icon icon="chess-knight" size="2x" />

固定图标宽度

使用 fixed-width 可以固定图标宽度。
在这里插入图片描述

<font-awesome-icon icon="home" fixed-width /> home <br>
<font-awesome-icon icon="child" fixed-width /> help <br>
<font-awesome-icon icon="cog" fixed-width /> settings <br>

旋转图标

在这里插入图片描述

<font-awesome-icon icon="chess-knight" rotation="0" />
<font-awesome-icon icon="chess-knight" rotation="90" />
<font-awesome-icon icon="chess-knight" rotation="180" />
<font-awesome-icon icon="chess-knight" rotation="270" />

翻转图标

在这里插入图片描述

<font-awesome-icon icon="chess-knight"  />
<font-awesome-icon icon="chess-knight" flip="horizontal" />
<font-awesome-icon icon="chess-knight" flip="vertical" />
<font-awesome-icon icon="chess-knight" flip="both" />

旋转动画效果

添加 spin 属性可以让图标不停地顺时针旋转。

<font-awesome-icon icon="arrow-circle-down" spin />

添加 pulse 属性同样可以让图标旋转，但它不像 spin 那样是均匀地变化角度，而是 0 度、45 度、90 度…这样跳跃地变化。

<font-awesome-icon icon="arrow-circle-down" pulse />

图标居左、居右

有时我们需要让图标一直在最左侧或最右侧（在做文字围绕图标效果时会用到）。默认情况下，当图标文字共存时的显示效果如下：
在这里插入图片描述

<font-awesome-icon icon="clipboard-list" size="2x"/>
welcome to hangge.com welcome to hangge.com

加上 pull=“left” 后的效果：

<font-awesome-icon icon="clipboard-list" size="2x" pull="left"/>
welcome to hangge.com welcome to hangge.com

加上 pull=“right” 后的效果：

<font-awesome-icon icon="clipboard-list" size="2x" pull="right"/>
welcome to hangge.com welcome to hangge.com

给图标加上边框（border）

在这里插入图片描述

<font-awesome-icon icon="clipboard-list" size="2x" pull="right" border />
welcome to hangge.com welcome to hangge.com

进阶用法

变形、自由变换（Transforms）

比如下面样例将第二个图标缩小 6，并向左移动 4：

<font-awesome-icon icon="clipboard-list" />
<br>
<font-awesome-icon icon="clipboard-list" transform="shrink-6 left-4" />

下面样例将第二个图标顺时针旋转 42 度：

<font-awesome-icon icon="clipboard-list" />
<br>
<font-awesome-icon icon="clipboard-list" :transform="{ rotate: 42 }" />

遮罩

在这里插入图片描述

<font-awesome-icon icon="star" />
<font-awesome-icon  icon="star" mask="circle"  />
<font-awesome-icon  icon="star" mask="square"  />

多个图标的组合使用

在这里插入图片描述

<font-awesome-layers class="fa-lg">
  <font-awesome-icon icon="circle" style="color: green;"/>
  <font-awesome-icon icon="check" transform="shrink-6" style="color: white;" />
</font-awesome-layers>

图标与文字的组合使用

在这里插入图片描述

<font-awesome-layers full-width class="fa-4x">
  <font-awesome-icon icon="star"/>
  <font-awesome-layers-text transform="down-1 right-1 shrink-14" value="hangge" style="color:white" />
</font-awesome-layers>

动态改变图标（图标的绑定）

<template>
  <font-awesome-icon :icon="icon" />
</template>
 
<script>
export default {
  computed: {
    icon() {
      return ['fas', 'coffee']
    }
  }
}
</script>

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