メニューやカテゴリー、記事のタイトルの先頭などにアイコンを表示して、その部分を目立たせたりユーザビリティを向上させたりすることができます。

このページでは、拡大や縮小をしても表示がくずれず、文字フォントと同じような感覚で使うことができるアイコンフォントを使ってメニューの前にアイコンを表示する方法を紹介します。

SPONSORED LINK

HTML/CSSの記述

疑似要素を使ってアイコンを表示する例をいくつか紹介します、以下のように記述します。

HTML

<div class="sample">sample-menu.</div>
CSS
.sample::before {
    font-family: fontawesome;
    content: "\f058";
}

sampleクラスの疑似要素に、Font Awesomeのフォントを表示するようにしています。

Font Awesomeはフリーで使うことのできるアイコンフォントです。

Font Awesomeを使うには、CDNサーバーに置いてあるアイコンフォントのファイルを読み込むか、アイコンフォントのファイルをダウンロードして自分のサーバーにアップロードする必要があります。

今回は簡単にできる前者の方法を記載します。

以下の内容をhtmlのheadタグ内に追加すれば設定完了です。

headタグ
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>

この一行を追加するだけで自分のWebサイトにたくさんのアイコンを表示することができるようになります。

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

WordPressの場合は、WordPressの管理画面のメニュー[外観]-[テーマの編集]を開き、header.phpを編集します。

heder.phpを開くと<head>~</head>という記述があるので、この<head>と</head>の間のどこかに追記して保存してください。

font-familyにfontawesomeを指定することで、Font Awesomeアイコンフォントを使用することを指定します。

contentでは、Font Awesomeのアイコンセットのうち、どのアイコンを表示するかを指定します。

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

http://fontawesome.io/cheatsheet/

ここから好きなアイコンを選択して、contentに設定します。

あとはfont-size、colorなどでサイズや色を調整して表示すれば完成です。

サンプル
sample01(\f075)
sample02(\f12a)
sample03(\f013)
SPONSORED LINK

コメントを残す

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