vue fa

字体下载 • 2025-07-31

vue-fa

Vue.J.

  • Fontawesome 5和6
  • Fontawesome SVG图标
  • 摇晃的，只有导入的图标
  • 无需CSS文件
  • fontawesome分层
  • Fontawesome Duotone图标

文件和示例。

安装

注意： vue-fa> = 3.x基于vue.js 3.x。 

npm install vue-fa --save

旧版本：

vue-fa@2 => vue@2 [文档]

npm install vue-fa@2

例如，通过[官方软件包] [fontawesome-npm]安装fontawesome图标，例如： 

npm install @fortawesome/free-solid-svg-icons

用法

">
 < template >
  < div >
    < Fa :icon =" faFlag " />
   div >
 template >

< script >
  import Fa from 'vue-fa'
  import { faFlag } from '@fortawesome/free-solid-svg-icons'

  export default {
    components : {
      Fa
    } ,

    setup ( ) {
      return {
        faFlag
      }
    }
  }
 script >

特性

">
 < Fa
  :icon =" faFlag "
  size =" 2x "
  color =" #ff0000 "
  fw
  pull =" left "
  :scale =" 1.2 "
  :translateX =" 0.2 "
  :translateY =" 0.2 "
  flip =" horizontal "
  :rotate =" 90 "
  spin
  pulse
/>
  • icon ：Fontawesome包装的图标，例如： @fortawesome/free-solid-svg-icons
  • size ： string值xs ， sm ， lg或2x ， 3x ， 4x ，...， ${number}x
  • color ： string图标颜色，默认的currentColor
  • fw ： boolean固定宽度
  • pull ：剩下string值left ， right
  • scale ： number | string变换比例，单位为em ，默认1
  • translateX ： number | string变换位置x，单元为em ，默认值0
  • translateY ： number | string变换位置y，单位为em ，默认值0
  • flip ： string值horizontal ， vertical ， both
  • rotate ： number | string 30 90 -30 270 180
  • spin ： boolean旋转图标
  • pulse ： boolean脉冲旋转图标

分层和文本

 import Fa , {
  FaLayers ,
  FaLayersText ,
} from 'vue-fa' ;
NEW ">
 < FaLayers
  size =" 4x "
  pull =" left "
>
  < Fa :icon =" faCertificate " />
  < FaLayersText
    :scale =" 0.25 "
    :rotate =" -30 "
    color =" white "
    style =" font-weight: 900 "
  >
    NEW
   FaLayersText >
 FaLayers >

FaLayers属性

  • size ： string值xs ， sm ， lg或2x ， 3x ， 4x ，...， ${number}x
  • pull ：剩下string值left ， right

FaLayersText属性

  • size ： string值xs ， sm ， lg或2x ， 3x ， 4x ，...， ${number}x
  • color ： string图标颜色，默认的currentColor
  • scale ： number | string变换比例，单位为em ，默认1
  • translateX ： number | string变换位置x，单元为em ，默认值0
  • translateY ： number | string变换位置y，单位为em ，默认值0
  • flip ： string值horizontal ， vertical ， both
  • rotate ： number | string 30 90 -30 270 180

Duotone图标

 import { faFlag } from '@fortawesome/pro-duotone-svg-icons'
">
 < Fa
  :icon =" faFlag "
  primary-color =" red "
  secondary-color =" #000000 "
  :primary-opacity =" 0.8 "
  :secondary-opacity =" 0.6 "
  swap-opacity
/>

Duotone图标主题

">
 < script >
import Fa from 'vue-fa'
import { faFlag } from '@fortawesome/pro-duotone-svg-icons'

const theme = {
  primaryColor : 'red' ,
  secondaryColor : '#000000' ,
  primaryOpacity : 0.8 ,
  secondaryOpacity : 0.6 ,
}
 script >

< Fa
  icon = {faFlag}
  v-bind =" theme "
/>
下载源码

通过命令行克隆项目:

git clone https://github.com/Cweili/vue-fa.git

相关文章

create fomantic icons

2025-07-31

WPFFontAwesome

2025-07-31

gerador horarios ist

2025-07-31

ukFontAwesome

2025-07-31

推荐阅读

向上：银河游戏免安装正式版

2026-01-23

风暴驭使正式中文版

2026-01-23

冥河：贪婪之刃中文试玩版

2026-01-23

超级键盘侠免安装绿色中文版

2026-01-23