メインコンテンツまでスキップ

DocusaurusでFontAwesomeを使う

はじめに​

FontAwesomeとは、ウェブサイトやアプリで多用されるアイコン（虫眼鏡アイコンや歯車アイコンなど）を集めた無料のアイコンフォントです。これを使うと簡単に見栄えのするウェブサイトを作ることができます。以下に、DocusaurusでFontAwesomeを使えるようにするための手順を示します。

FontAwesomeのインストール​

ここでは、mysiteというフォルダ内にDocusaurusがインストールされている前提で説明します。

/Docusaurus
　└/mysite
　　　├package.json
　　　├package-lock.json
　　　├docusaurus.config.jp
　　　　　　：
手順​
  1. ターミナルを開く
  2. ターミナルに以下コマンドを入力して[Enter]押 
    cd <<mysiteフォルダのパス名>>

    フォルダのパス名を知る方法: Finderでフォルダを右クリックし且つ[option]を同時押→右クリックメニューのメニュー項目に現れる「○○○○のパス名をコピー」という項目を選ぶ→フォルダのパス名がクリップボードにコピーされる

  3. ターミナルに以下コマンドを入力して[Enter]押 
    npm install --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
  4. 処理完了したら、ひきつづきターミナルに以下コマンドを入力して[Enter]押 
    npm install --save @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons
  5. 処理完了したら、ターミナルを終了する
  6. 了

Docusaurusの設定​

前手順でインストールしたDocusaurusでFontAwesomeを使えるようにするため、JavaScriptファイルを作成してDocusaurusシステムの所定の場所に保存します。

手順​
  1. mysite/src/themeフォルダを開く（なければ作る）
  2. mysite/src/themeフォルダ内にMDXComponents.jsというファイル名の空のテキストファイルを作る（テキストエンコード設定間違えを避けるために、docusaurus.config.jsを複製してファイル名を変更したものを置いても良い）
  3. 作成したMDXComponents.js（空のテキストファイル）をテキストエディタで開く
  4. 中身を以下の通りに書き換える
    変更前(空のテキストファイル)：
    変更後： 
    import React from 'react';
     // Import the original mapper
     import MDXComponents from '@theme-original/MDXComponents';
     import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // Import the FontAwesomeIcon component.
     import { library } from '@fortawesome/fontawesome-svg-core'; // Import the library component.
     import { fab } from '@fortawesome/free-brands-svg-icons'; // Import all brands icons.
     import { fas } from '@fortawesome/free-solid-svg-icons'; // Import all solid icons.
     
     library.add(fab, fas); // Add all icons to the library so you can use them without importing them individually.
     
     export default {
       // Re-use the default mapping
       ...MDXComponents,
       FAIcon: FontAwesomeIcon, // Make the FontAwesomeIcon component available in MDX as <icon />.
     };
  5. 書き換えたMDXComponents.jsを保存する
  6. 了

FontAwesomeを使う​

CSSで挿入する​

たとえばCSSを使って見出しの行頭にアイコンを付与できます。

記入例​
//CSS
h5::before {
  content: "\f02b";
  font-family: FontAwesome;
  color:gray;
  margin-right:0.2em;
}
<!-- HTML -->
<h5>見出し</h5>
結果​
見出し​

ダブルクォーテーション"に囲まれた文字列5文字がアイコンを表しています。どの文字列がどのアイコンに対応しているかについては、FontAwesomeのウェブサイトで調べる必要があります。

FontAwesome:​

https://fontawesome.com/v6/search?o=r&m=free

文章中に直接書き込む​

文章中にFontAwesomeのアイコンを挿入したい場合は、原稿（.mdファイル）にFontAwesome用の特殊なタグを書き込みます。

記入例​
<FAIcon icon="fa-solid fa-house" /> 家のアイコンを表示しています。

<FAIcon icon="fa-solid fa-house" size="4x" /> 家のアイコンを4倍サイズで表示しています。
結果​

家のアイコンを表示しています。

家のアイコンを4倍サイズで表示しています。

こちらの場合はダブルクォーテーション"に囲まれたfaで始まる文字列がアイコンを表しています。どの文字列がどのアイコンに対応しているかについては、やはりFontAwesomeのウェブサイトで調べる必要があります。

おわりに​

このサイトでもあちこちにFontAwesomeを使用しています。アイコンを簡単に挿入できてとても便利です。

以上​

に最終更新