【Webフォント】フォントオーサム5フリー版の使い方 その2 (HTMLとCSSの記述篇)

ホームページ
この記事は約4分で読めます。

便利なWebフォントとして、世界中の人が利用している Font Awesome もバージョン5になって、しばらく経ちましたので、使い方も落ち着いてきたようです。

ということで、ボクが試行錯誤してきた使い方を簡単に書いておきます。

ライターの男性

前回、Font Awesome 5 Free版を使うための準備が済みました。
今回は、実際に使ってみます。

スポンサーリンク

使いたい絵文字を探す

まずは Font Awesome の Webサイトで、使いたい絵文字を探しました。

Font Awesome のトップ画面

作業手順:

  1. Font Awesome の Webサイトを開く
  2. グローバルメニューから「Icons」をクリック
Font Awesome の文字一覧

作業手順:

  1. すると、絵文字が一覧になったページが開く
  2. 左サイドバーに並んでいるフィルターを選択したり、検索ボックスに英単語を入力して、表示したい絵文字を探す
  3. 表示したい絵文字が見つかったら、絵文字をクリック
分かれ道に立つ男性

これ以降は、つぎの 2つの場合について説明します。

  • HTML で絵文字を表示する場合
  • CSS で絵文字を表示する場合

HTML で絵文字を表示

HTML で絵文字を表示する場合は、つぎに Font Awesome の Webサイトで、絵文字の記述をコピーして、HTML に貼り付けます。

記述をコピー

Font Awesome の文字の例

作業手順:

  1. 表示したい絵文字のページを開く
  2. 右サイドバーで、絵文字のカテゴリーを選択(ただし、選択可能な絵文字のみ)
  3. 画面下の HTML の記述を、クリップボードの絵文字をクリックしてコピー

HTML に貼り付け

<body>
  ~
  <i class="fas fa-xxxxxxxx"></i>
  ~
</body>

作業手順:

  1. 絵文字を表示したい HTMLファイルを開く
  2. 絵文字を表示したい場所に、先ほどコピーした HTML の記述を貼り付ける
  3. ブラウザで表示して確認
千社札

なお、絵文字を表示したい場所が複数ある場合には、それぞれの場所に HTML の記述を貼り付ける必要があります。

CSS で絵文字を表示

CSS で絵文字を表示する場合は、つぎに Font Awesome の Webサイトで、絵文字のコードをコピーして、CSS でスタイル定義の中に貼り付けます。

記述をコピー

Font Awesome の文字の例

作業手順:

  1. 表示したい絵文字のページを開く
  2. 画面下の 絵文字のコードを、クリップボードの絵文字をクリックしてコピー

CSS でスタイル定義

<body>
  ~
  <span class="icon">サンプル</span>
  ~
</body>

作業手順:

  1. 絵文字を表示したい HTML ファイルを開く
  2. 絵文字を表示したいタグに、クラス(例えば、icon)を追加
.icon::before {
  content: '\fxxx';
  font-weight: bold;
  font-family: 'Font Awesome 5 Free';
}

作業手順:

  1. CSSファイルで、追加したクラス(例えば、icon)に対して、スタイルを定義
  2. 絵文字をタグの前に表示したい場合は、疑似要素「::before」、タグの後に表示したい場合は、疑似要素「::after」を使う
  3. contentプロパティに、先ほどコピーしたコードを貼り付ける(コードの最初に、バックスラッシュを入れる)
  4. Solidカテゴリーの絵文字の場合は、font-weightプロパティに「bold」を指定
  5. Regularカテゴリーの絵文字の場合は、font-weightプロパティに「normal」を指定(なお、Free版に含まれる文字しか表示されない)
  6. font-familyプロパティに、’Font Awesome 5 Free’ を指定

あとがき

不思議に思う少年

Font Awesome がバージョン5 になった当初は、CSS での記述の仕方が、いまいち判りませんでした。

しかし、配布されている CSS ファイルの中身を見て、どうにか解決できました。
これからは、もうあまり難しい仕様にならないと、いいのだけれど。

福助人形

最後に、Font Awesome を作ってくれた方、こんなに素晴らしいものを作ってくれて、ありがとうございます(日本語ですけど)。

コメント

タイトルとURLをコピーしました