1.1.2 • Public • Published


    npm version npm downloads Circle CI License

    Module to use Font Awesome icons in your Nuxt.js project. Uses vue-fontawesome under the hood

    📖 Release Notes


    • Add dependency using npm to your project
    $ yarn add @nuxtjs/fontawesome -D
    // or to also add the free icon packs
    $ yarn add @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons -D
    • Add @nuxtjs/fontawesome to buildModules in your nuxt.config
    • Configure loaded icons/whole sets

    Use the 'fontawesome' key:

      // nuxt.config.js
      buildModules: [
      fontawesome: {
        icons: [

    or include the options in the modules listing

      // nuxt.config.js
      buildModules: [
        ['@nuxtjs/fontawesome', {
          component: 'fa',
          suffix: true,
          proIcons: { // if you have bought the Pro packages
            // list the icons you want to add, not listed icons will be tree-shaked
            solid: [
            // include all icons. But dont do this.
            regular: true

    Module options


    • Default: FontAwesomeIcon

    Change component name. Eg set to fa to use <fa icon="" ... />. Also see suffix

    It's strongly recommended to use PascalCase for component names


    • Default: true

    Boolean to indicate if the layers component should be registered globally. Name of the component will be ${options.component}-layers, fe <fa-layers ... />


    • Default: true

    Boolean to indicate if the layers component should be registered globally. Name of the component will be the ${options.component}-layers-text, fe <fa-layers-text ... />


    Which icons you will use. FontAwesome currently supports 5 icon styles of which 3 are freely available (partially).

    This option is an object with the style names as property and an array with all icon names you wish to use from those styles

      icons: {
        solid: [ 'faHome', ... ],
        regular: [ ... ],
        light: [ ... ],
        duotone: [ ... ],
        brands: [ ...]

    Although not recommended, you can use true to include the full icon set:

      icons: {
        solid: true


    See icons for how to use, but always uses pro imports.


    • Default: true

    If the module should automatically add the fontawesome styles to the global css config. It works by unshifting @fortawesome/fontawesome-svg-core/styles.css onto the nuxt.options.css property.


    • Default: false

    Boolean whether to append -icon to the icon component name. This option exists as the component name option is also used for the layer components and you might not want to add '-icon' to those

      // config
      component: 'Fa',
      suffix: true
      // usage
      <fa-icon />
      <fa-layer />
      // config
      component: 'FaIcon',
      suffix: false
      // usage
      <fa-icon />
      <fa-icon-layers />

    imports deprecated

    Import icons/whole sets from chosen packages. This is the old configuration and will likely be removed in a future version. Use icons instead

    • Default: [], no icons will be imported here (see below, can be loaded later inside .vue file)
      • set - path to node package for import, like @fortawesome/free-solid-svg-icons
      • icons - array of icons to import ['faAdjust', 'faArchive'].
      imports: [
          set: '@fortawesome/free-solid-svg-icons',
          icons: ['faHome']


    You can find more details under example folder. Also please see vue-fontawesome for additional reference

    • Ensure you have installed an icon package yarn add @fortawesome/free-solid-svg-icons -D
    • and have added the module configuration to your nuxt.config.js

    Default component names are:

    • <font-awesome-icon>
    • <font-awesome-layers>
    • <font-awesome-layers-text>

    With component option set, -layers and -layers-text suffixes will be appended (see example below)

      // nuxt.config
      fontawesome: {
        icons: {
          solid: ['faHome'],
          regular: ['faAdjust']
    • Use global icons:
        <font-awesome-icon :icon="['fas', 'adjust']"  />
        <font-awesome-icon icon="dollar-sign"  style="font-size: 30px"/>
        <font-awesome-icon icon="cog"/>
        <font-awesome-layers class="fa-4x">
          <font-awesome-icon icon="circle"/>
          <font-awesome-icon icon="check" transform="shrink-6" :style="{ color: 'white' }"/>
        <font-awesome-layers full-width class="fa-4x">
          <font-awesome-icon icon="calendar"/>
          <font-awesome-layers-text transform="shrink-8 down-3" value="27" class="fa-inverse" />
    • Use locally imported icons
            <fa-layers full-width class="fa-4x">
              <fa :icon="fas.faCircle"/>
              <fa-layers-text transform="shrink-12" value="GALSD" class="fa-inverse" />
            <fa :icon="fas.faAddressBook"  />
            <fa :icon="faGithub" />
    import { fas } from '@fortawesome/free-solid-svg-icons'
    import { faGithub } from '@fortawesome/free-brands-svg-icons'
    export default {
      computed: {
        fas () {
           return fas // NOT RECOMMENDED
        faGithub () {
           return faGithub


    MIT License

    This module was forked from the (font) awesome module created by Galley Web Development

    Copyright (c) Nuxt Community


    npm i @nuxtjs/fontawesome

    DownloadsWeekly Downloads






    Unpacked Size

    15 kB

    Total Files


    Last publish


    • pimlie