MkDocs の見出しを Font Awesome で装飾する

Font Awesome のアイコンが見出しの頭にくっつくようにして、なんとなくかわいい感じにします。

説明用のライブデモページを作っていますので、詳しくはそちらで。

簡単にまとめると、

  • extra_css で Font Awesome の CSS ファイルを読ませて
  • カスタム CSS ファイルで ::before 疑似要素で Font Awesome の文字を流し込めばよい
  • Material テーマの場合は、いくつかの設定で !important でオーバライドする必要がある

という感じです。

mkdocs.yml で以下のようにして、

extra_css:
    - "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    - "css/custom.css"

そのうえで、例えば Material テーマの場合は、custom.css で以下のようにします。

.md-typeset h2::before {
    display: inline-block !important;
    font-family: "FontAwesome";
    content: "\f0a9" !important;
    margin-right: .3em;
}

説明用のページでは、Font Awesome の最新の 5.x 系を使う例も紹介しています。

あと地味に <a> タグも ::before でアイコンを付けています。かわいい。

@kurokobo

くろいです。ギターアンサンブルやら音響やらがフィールドの IT やさんなアルトギター弾き。たまこう 48 期ぎたさん、SFC '07 おんぞう、新日本ギターアンサンブル、Rubinetto。今は野良気味。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です