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コード(赤線部)が表示されますので、それを表示したい場所のソースに張り付けます。
すると、
といった感じでアイコンが表示されます。
以上です。