Quasarでfontawesomeを使う方法

• 概要
• 環境
• quasar.conf.js の編集
• q-icon で使う
• もしくは直接 vue ファイルで import しても OK
• 最後に
• 参考サイト

概要

q-carousel の使い方をサンプルコード付きで紹介します
今回は q-btn-toggle を組み合わせて使います

環境

• macOS 11.7
• node 18.9.0
• quasar 2.8.2

quasar.conf.js の編集

extras という配列の項目があるのでそこの「fontawesome-v6」をコメントインします

• vim quasar.config.js

    extras: [
      // 'ionicons-v4',
      // 'mdi-v5',
      'fontawesome-v6',
      // 'eva-icons',
      // 'themify',
      // 'line-awesome',
      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!

      'roboto-font', // optional, you are not bound to it
      'material-icons', // optional, you are not bound to it
    ],

q-icon で使う

あとは以下のように参照するだけです

<q-icon name="fa-brands fa-gitlab" />

サイズを指定する場合は size プロパティを使えば OK です

<q-icon name="fa-brands fa-gitlab" size="10em"/>

もしくは直接 vue ファイルで import しても OK

<template>
  <q-icon :name="fabGitlab" size="10em"/>
</template>

<script setup lang="ts">
import { fabGitlab } from '@quasar/extras/fontawesome-v6';
</script>

最後に

vue 用に font-awesome-icon というタグが用意されているのでそれを使っても良さそうな気がします

参考サイト

• https://quasar.dev/vue-components/icon#fontawesome