【CSS】メニューや見出しの前にアイコンを表示する方法(#Font Awesome)

【CSS】メニューや見出しの前にアイコンを表示する方法(#Font Awesome) Webデザイン&CSS

このページでは、アイコンフォントを使ってメニューや見出しの前にアイコンを表示する設定方法を解説します。アイコンフォントは文字フォントと同じような感覚で使うことができ、拡大や縮小をしても表示がくずれない便利な仕組みです。

メニューなどにおいて、アイコンとラベルを組わせることで認識しやすくすることでユーザビリティを向上させたりすることができます。

アイコンフォントを使う準備

今回はFont Awesomeというフリーで利用できるアイコンフォントサービスを使ってアイコンを表示します。外部のサーバーで公開されているフォントデータを読み込んで利用するため、まずはその設定をします。

設定方法は以下の2種類あります。

WordPressのプラグインをインストールする方法

WordPressを利用している場合はプラグインをインストールするだけで準備が完了します。

[ダッシュボード]-[プラグイン]のページから[新規追加]をクリックし、以下の表示している「Font Awesome」というプラグインを検索してインストール、有効化することで設定が完了します。

Font Awesome
The official way to use Font Awesome Free or Pro icons on your site, brought to you by the Font Awesome team.

htmlのheadタグに設定する方法

WordPressを使っていない場合は手動でheadタグに以下のタグの追加が必要です。以下の内容をhtmlのheadタグ内に追加します。

<!-- headタグ -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

htmlファイルの中のタグの中に上記の内容をコピぺすれば設定完了です、WordPressでプラグインを使わない場合は[ダッシュボード]-[外観]-[テーマの編集]の[header.php]から操作することもできます。

ぼんやま
ぼんやま

バージョンが変わる場合があるけど、リンク先の最新URLは「https://www.bootstrapcdn.com/fontawesome/」で確認することができるから、これに書き換えればOK!

メニューや見出しの前にアイコンを表示する

アイコンフォントを利用する準備ができたらCSSでアイコンを利用する設定をしていきます。メニューや見出しの前にアイコンを表示するのには、疑似要素を使って表示する箇所や使うアイコンの種類、サイズを指定します。

<!-- headタグ -->
<div class="sample">sample-menu.</div>
/* CSSの記述 */
.sample::before {
    font-family: fontawesome;
    content: "\f058";
}

sampleクラスの疑似要素に、Font Awesomeのフォントを表示するようにしています。font-familyにfontawesomeを指定することで、Font Awesomeアイコンフォントを使用する指定をしています。contentではFont Awesomeのアイコンセットのうち、どのアイコンを表示するかを指定します。

使いたいアイコン = 指定するコードは、以下の公式サイトに一覧があるので、ここから好きなフォント探して、ユニコードの部分をコピペして設定することができます。(#f〇〇〇と書いてあるいうところですね。)

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

ここから好きなアイコンを選択して、contentに設定します。あとはfont-size、colorなどでサイズや色を調整して表示すれば完成です。

fontsample0101(\f075)
fontsample0102(\f12a)
fontsample0103(\f013)
ぼんやま
ぼんやま

Font Awesomeは無料でもたくさんの種類のアイコンが使えるけど、有料プランではさらに多くのアイコンが使えるよ!

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