reveal.jsでFontAwesome5を使ったデザインをする

1. 何がしたいのか

reveal.js + markdownでプレゼン資料を作っていたが、素ではどうにも寂しい。
そこで、ヘッダーデザインだけでも...FontAwesome5を使っておしゃれにしてみたい！と少しだけ手を加えてみました。

2. 完成イメージ

こんなMarkdownを書いて...

slides.md

### h3 reveal.js

content

このように表示したい。

index.html

3. やり方

3-1. FontAwesomeと自作CSSを読み込む

index.html

<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.4/css/all.css">

<!-- カスタムCSS -->
<link rel="stylesheet" href="custom.css">

3-2. 自作CSSで設定を上書きする

custom.css

/* Inject icon for header */

.reveal .slides h3::before {
  font-family: 'Font Awesome\ 5 Free', 'Font Awesome\ 5 Brands';
  content: '\f138';
  color: #f8ff91;
  padding-right: 10px;
}

コードポイントは各アイコンのページで確認ができます。
https://fontawesome.com/icons

これで完成。

Tips. フォント

個人的にNotoSansが好きなので、
Google日本語フォント（アーリーアクセス版）から利用しています。

index.html

<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" />

custom.css

/* Font settings */

.reveal .slides {
  font-family: 'Noto Sans Japanese';
  font-weight: 200;
  font-size: calc(22px + 0.25vw);
  text-align: left;
}

.reveal .slides h1,
.reveal .slides h2 {
  font-weight: 900;
  text-align: center;
}