Hapicode - プログラミング技術ブログ

# Nuxt Fontawesome アイコン使う

FontAwesome（フォントオーサム）は、ウェブサイトやウェブアプリケーションで使用するためのアイコンフォントおよび CSS フレームワークのライブラリです。FontAwesome は、様々な種類のアイコンやシンボルを提供し、これらのアイコンを簡単にウェブページに組み込むことができます。

FontAwesome の特徴

  • アイコンフォント
    FontAwesome は、アイコンをベクトルフォントとして提供します。これは、通常のフォントと同様にテキストとして表示できるため、スケーリングやカラー設定が容易で、高品質の表示が可能です。アイコンは HTML の要素内に特定のクラスを適用することで挿入できます。

  • 多くのアイコン
    FontAwesome には、さまざまなカテゴリー（例: ユーザーアイコン、ソーシャルメディアアイコン、矢印、ファイルタイプなど）にわたる数千ものアイコンが含まれており、ほとんどのウェブデザインニーズをカバーしています。

  • カスタマイズ可能
    FontAwesome のアイコンは CSS でカスタマイズでき、サイズ、色、スタイルなどを変更することができます。これにより、ウェブサイトやアプリケーションのデザインに合わせてアイコンを調整できます。

  • 無料版とプロ版
    FontAwesome には無料のバージョンとプロの有料バージョンがあり、プロ版にはさらに多くのアイコンや機能が含まれていますが、多くの一般的な用途には無料バージョンでも十分です。無料版だけでも 2,000 以上のアイコンが用意されています。

# CDN で Font Awesome を使う

FontAwesome のアイコンをプロジェクトに追加し、使用する基本的な方法で head に追加するだけ使えます。

  1. FontAwesome をプロジェクトに追加

<link>要素を HTML の<head>セクションに追加して使うことが一番簡単ですが、必要ないアイコンも読み込んでしまうことが欠点です。

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
/>

最新 CDN 公開 Font Awesome Library (opens new window)

  1. アイコンの使用

FontAwesome をプロジェクトに追加したら、アイコンを HTML コードに追加できます。

<!-- Solidスタイルの星アイコン -->
<i class="fas fa-star"></i>

<!-- Regularスタイルの星アイコン -->
<i class="far fa-star"></i>

<!-- アイコンのサイズを2倍にする -->
<i class="fas fa-star fa-2x"></i>

<!-- アイコンのサイズをlargeにする -->
<i class="fas fa-camera fa-lg"></i>

# CDN 使うメリットとデメリット

メリット

  • 高速なコンテンツ提供
    CDN は、コンテンツを複数の地理的に分散したサーバーに配置し、ユーザーに近い場所からコンテンツを提供するため、ウェブページの読み込み速度を向上させます。これにより、ユーザーエクスペリエンスが向上し、サイトのパフォーマンスが向上します。
  • トラフィック負荷の分散
    CDN はトラフィックを分散し、オリジンサーバーへの負荷を軽減します。これにより、ウェブサーバーの安定性が向上し、サービスの中断を防ぎます。
  • セキュリティ向上
    CDN プロバイダーは、セキュリティ対策を強化するためのツールとテクニックを提供することがあります。DDoS 攻撃からの保護や、ウェブアプリケーションファイアウォール（WAF）の利用などが含まれます。
  • スケーラビリティ
    CDN はトラフィックが急増した場合にもスケーラブルで、新たなサーバーを迅速に追加することができます。これにより、急激なトラフィック増加に対応できます。

デメリット

  • コスト
    CDN サービスは一般的に無料ではなく、使用量やサービスの種類に応じて課金されます。小規模なウェブサイトやプロジェクトにとっては、追加のコストがかかる可能性があります。
  • セキュリティ懸念
    CDN はセキュリティを向上させる一方で、セキュリティの脆弱性を持つこともあります。CDN プロバイダーに依存するため、プロバイダーのセキュリティ対策が不十分であれば、サイトに脆弱性が生じる可能性があります。
  • カスタマイズの制限
    CDN はコンテンツの提供を最適化するためにキャッシュを使用しますが、これにより動的なコンテンツの更新が遅れる場合があります。動的なコンテンツが多い場合、カスタマイズの制限が生じる可能性があります。
  • 依存性の増加
    CDN を使用すると、サービスの可用性に依存することになります。CDN プロバイダーの障害や停止時に、サイトの可用性に影響を及ぼす可能性があります。

@fortawesome/fontawesome-free パッケージインストール

# FontAwesome パッケージをインストールして使う方法

パッケージインストールのメリット

FontAwesome アイコンをビルドする場合、特定のアイコンだけをインポートして、ビルドサイズを最小限に抑えることは可能です。

Yarn を使用して FontAwesome をインストールし、Nuxt.js プロジェクトで使用する手順紹介します。

# コアパッケージをインストール
yarn add @fortawesome/fontawesome-svg-core

# Freeのアイコンパッケージをインストール
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

# for Vue 2.x
yarn add @fortawesome/vue-fontawesome@latest-2

# for Vue 3.x
yarn add @fortawesome/vue-fontawesome@latest-3

# 直接 import して使う

import "@fortawesome/fontawesome-free/js/fontawesome";
import "@fortawesome/fontawesome-free/js/solid";
import "@fortawesome/fontawesome-free/js/regular";

<i class="fa-solid fa-user"></i>

# font-awesome-icon components 化して使う

Vue 2

/* Set up using Vue 2 */
import Vue from "vue";
import App from "./App";

/* import the fontawesome core */
import { library } from "@fortawesome/fontawesome-svg-core";

/* import font awesome icon component */
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

/* import specific icons */
import { faUserSecret } from "@fortawesome/free-solid-svg-icons";

/* add icons to the library */
library.add(faUserSecret);

/* add font awesome icon component */
Vue.component("font-awesome-icon", FontAwesomeIcon);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  components: { App },
  template: "<App/>",
});

Vue 3

/* Set up using Vue 3 */
import { createApp } from "vue";
import App from "./App.vue";

/* import the fontawesome core */
import { library } from "@fortawesome/fontawesome-svg-core";

/* import font awesome icon component */
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

/* import specific icons */
import { faUserSecret } from "@fortawesome/free-solid-svg-icons";

/* add icons to the library */
library.add(faUserSecret);

createApp(App).component("font-awesome-icon", FontAwesomeIcon).mount("#app");

template につかう



 









<template>
  <div id="app">
    <font-awesome-icon icon="fa-solid fa-user-secret" />
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

# nuxt fontawesome 使う

Nuxt.js 使うなら Nuxt 用 Font Awesome のパッケージがあります。

# nuxt fontawesomeパッケージをインストール
# for Nuxt 2
yarn add @fortawesome/vue-fontawesome@latest-2

# for Nuxt 3
yarn add @fortawesome/vue-fontawesome@latest-3

# 依存パッケージをインストール
yarn add @fortawesome/vue-fontawesome
yarn add @fortawesome/fontawesome-svg-core

plugins/fontawesome.js作る

Nuxt.js 2.x

// For Nuxt 2
import Vue from "vue";
import { library, config } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from "@fortawesome/free-solid-svg-icons";

config.autoAddCss = false;

library.add(fas);

Vue.component("font-awesome-icon", FontAwesomeIcon);

nuxt.config.js に設定追加

// For Nuxt 2
css: ["@fortawesome/fontawesome-svg-core/styles.css"];

plugins: ["~/plugins/fontawesome.js"];

Nuxt.js 3.x

// For Nuxt 3
import { library, config } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from "@fortawesome/free-solid-svg-icons";

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false;

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas);

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("font-awesome-icon", FontAwesomeIcon, {});
});

nuxt.config.ts

// For Nuxt 3
export default defineNuxtConfig({
  css: ["@fortawesome/fontawesome-svg-core/styles.css"],
});

あとは使うだけ

<template>
  <font-awesome-icon icon="fa-user" />
  <font-awesome-icon icon="dollar-sign" style="font-size: 30px" />
  <font-awesome-icon icon="cog" />
</template>

# @nuxtjs/fontawesome 使う

インストール

yarn add @nuxtjs/fontawesome -D

// フリーパケットインストール
$ yarn add @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons -D

nuxt.config.js

 // nuxt.config.js
  buildModules: [
    '@nuxtjs/fontawesome',
  ],
  // 使うアイコンだけを定義
  fontawesome: {
    icons: {
      solid: [
        'faUser',
        'faHeart',
        'faComment',
        'faEdit',
        'faTrash',
        'faRectangleXmark',
        'faSquareCheck',
        'faTableList',
        'faBell',
        'faEnvelope',
        'faEnvelopesBulk',
        'faEye',
        'faAngleRight',
        'faGavel',
        'faSquarePlus',
        'faBuilding',
        'faPhone',
        'faEarthAmericas',
        'faMapPin',
        'faMapMarkerAlt',
        'faUserShield',
        'faCube',
        'faCubes',
        'faSackDollar',
        'faGears',
        'faCircleXmark',
        'faCirclePlus',
        'faPenToSquare',
        'faCircleCheck',
        'faFingerprint',
        'faClockRotateLeft',
        'faHourglassHalf',
        'faArrowLeft',
        'faChevronLeft',
        'faChevronRight',
        'faMagnifyingGlass',
        'faFloppyDisk',
        'faCircleQuestion',
      ],
      regular: ['faHeart'],
    },
  },
2023-09-08
css

同じタグを持つ記事をピックアップしました。

プログラミング技術ブログ
実践的な開発ノウハウを発信

サイト

技術

JavaScript Vue.js PHP Python Flutter

フォロー

© 2025 Hapicode. All rights reserved.