MkDocs で Font Awesome の 無料 アイコン を表示させる方法

Font Awesomeという無料の(有償もある)アイコンをHPに表示する方法について述べます。

cssの設定

前準備として、 MkDocs で Font Awesome アイコンを使えるようにするには、 mkdocs.yml に、以下の記述を追加する必要があります。

extra_css:
    - 'https://use.fontawesome.com/releases/v6.2.1/css/all.css'

無料で使えるアイコンの一覧の表示

Font Awesome の HP に行き(https://fontawesome.com/)、サーチアイコンをクリックします。
タイトル

次に、Freeと書いてあるアイコンをクリックすると、
タイトル

無料で使えるアイコンの一覧が表示されます。

アイコンをWebページ上に表示する方法

アイコンをHPに表示するには、使いたいアイコンをまず選びます(ここでは House アイコンを使ってみることにします)
タイトル

HouseアイコンをクリックするとHTMLコード(赤線部)が表示されますので、それを表示したい場所のソースに張り付けます。
タイトル

すると、

といった感じでアイコンが表示されます。

以上です。