Font Awesome 5 Vue组件

Vue-fontawesome (vue-fontawesome)

Font Awesome 5 Vue component

Font Awesome 5 Vue组件

View demo 查看演示 Download Source 下载源

安装 (Installation)

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/vue-fontawesome
           

or

要么

$ yarn add @fortawesome/fontawesome
$ yarn add @fortawesome/vue-fontawesome
           

用法 (Usage)

基础 (The basics)

The

icon

property of the

FontAwesomeIcon

component can be used in the following way:

可以按以下方式使用

FontAwesomeIcon

组件的

icon

属性：

Shorthand that assumes a prefix of

fas

:

缩写为

fas

的缩写：

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

Explicit prefix (note the Vue bind shorthand because this uses an array):

显式前缀(请注意Vue绑定的简写，因为它使用数组)：

<font-awesome-icon :icon="['far', 'spinner']" />
           

Explicit icon definition (this is pseudo-code, see examples below for more detail):

明确的图标定义(这是伪代码，有关更多详细信息，请参见下面的示例)：

import faCoffee from '@fortawesome/fontawesome-free-solid/faCoffee'

<font-awesome-icon :icon="getIcon" />

function getIcon () {
  return faCoffee
}
           

与Vue一起使用 (Using it with Vue)

Using an explicit icon offers the advantage of only bundling the icons that you use in your final bundled file. This allows us to subset Font Awesome's thousands of icons to just the small number that are normally used.

使用显式图标的优点是仅捆绑了您在最终捆绑文件中使用的图标。 这使我们可以将Font Awesome的数千个图标子集化为通常使用的少量图标。

Import the specific icons that you need:

导入所需的特定图标：

<template>
  <div id="app">
    <font-awesome-icon :icon="icon" />
  </div>
</template>

<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import faCoffee from '@fortawesome/fontawesome-free-solid/faCoffee'

export default {
  name: 'FAExample',

  computed: {
    icon () {
      return faCoffee
    }
  },

  components: {
    FontAwesomeIcon
  }
}
</script>
           

It can be tedious to always import the icons individually so a library can be configured and shorthand can be used when rendering the icon.

始终单独导入图标可能很麻烦，因此可以配置一个库，并在呈现图标时使用速记。

Define a library that can be used without explicit imports:

定义一个无需显式导入即可使用的库：

App.js

App.js

import Vue from 'vue'
import Main from './Main.vue'
import fontawesome from '@fortawesome/fontawesome'
import brands from '@fortawesome/fontawesome-free-brands'
import faSpinner from '@fortawesome/fontawesome-free-solid/faSpinner'

fontawesome.library.add(brands, faSpinner)

new Vue({
  el: '#app',
  render: h => h(Main)
})
           

FAExample.vue

FAExample.vue

<template>
  <div id="app">
    <!-- If you are using the "Solid" style you can simply use the icon name -->
    <font-awesome-icon icon="spinner" />
    <!-- Using another style needs a prefix in the following array format -->
    <font-awesome-icon :icon="['fab', 'font-awesome']" />
  </div>
</template>

<script>
export default {
  name: 'FAExample',

  components: {
    FontAwesomeIcon
  }
}
</script>
           

特征 (Features)

基本的 (Basic)

Spin and pulse animation:

自旋和脉冲动画：

<font-awesome-icon icon="spinner" spin />
<font-awesome-icon icon="spinner" pulse />
           

Fixed width:

固定宽度：

<font-awesome-icon icon="spinner" fixed-width />
           

Border:

边境：

<font-awesome-icon icon="spinner" border />
           

List items:

清单项目：

<font-awesome-icon icon="spinner" list-item />
           

Flip horizontally, vertically, or both:

水平，垂直或同时翻转：

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

Size:

尺寸：

<font-awesome-icon icon="spinner" size="xs" />
<font-awesome-icon icon="spinner" size="lg" />
<font-awesome-icon icon="spinner" size="6x" />
           

Rotate:

旋转：

<font-awesome-icon icon="spinner" rotate="90" />
<font-awesome-icon icon="spinner" rotate="180" />
<font-awesome-icon icon="spinner" rotate="270" />
           

Pull left or right:

向左或向右拉：

<font-awesome-icon icon="spinner" pull="left" />
<font-awesome-icon icon="spinner" pull="right" />
           

高级 (Advanced)

Power Transforms:

功率变换：

<font-awesome-icon icon="spinner" transform="shrink-6 left-4" />
<font-awesome-icon icon="spinner" :transform="{ rotate: 42 }" />
           

Masking:

掩蔽：

<font-awesome-icon icon="coffee" :mask="['far', 'circle']" />
           

Symbols:

符号：

<font-awesome-icon icon="edit" symbol />
<font-awesome-icon icon="edit" symbol="edit-icon" />
           

翻译自: https://vuejsexamples.com/font-awesome-5-vue-component/