CSSを使ってアイコンを表示させる方法。時計・家・カメラなど

f:id:somegoro:20160704184808j:plain
今日（2016年7月4日）は大雨でしたね。久しぶりに嵐のようでした。台風が来ているようなので引き続き警戒していきましょう。

さて今回の記事では、スタイルシート（css）を使ってアイコン表示をする方法をご紹介します。

以前の記事で、HTMLのみでアイコンを使う方法をご紹介しました。今回はその応用編です。
somegoro.hatenablog.com

スタイルシート（css）を用いてアイコンを自由に使えることが出来れば、より便利にアイコンを使用することが出来ます。とりわけ、アイコン設置後に修正するなどの管理が楽です。

この方法では３ステップで済みますのでとても簡単です。

簡単３ステップ
１．HTMLファイル先頭にリンクを書く
２．HTMLのタグに任意のクラス属性を追加する
３．スタイルシート（css）で疑似要素を記載する

それでは具体的な方法を記載していきます。

まずはHTMLファイルの先頭に次のように記載します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

これは何をしているかというと、Webにアクセスしてファイルを読み込んでいます。はてなブログではヘッダのタイトル下（HTMLを記述できます）の部分に記載しておくと良いかと思います。

アイコンを表示したいタグに次のように任意のクラス（hoge）を書きます。

<div class="hoge">アイコン表示のテスト</div>

上記手順で追加した任意のクラス属性に疑似要素（content）を書きます。具体的な書き方として６種類とりあげます。

css で次のように書くとアイコンが表示されます。

.hoge:before {
  font-family: 'FontAwesome';
  content: "\f083";
}

こんな感じに表示されます。

アイコン表示のテスト

css で次のように書くとアイコンが表示されます。

.hoge:before {
  font-family: 'FontAwesome';
  content: "\f046";
}

css で次のように書くとアイコンが表示されます。

.hoge:before {
  font-family: 'FontAwesome';
  content: "\f017";
}

css で次のように書くとアイコンが表示されます。

.hoge:before {
  font-family: 'FontAwesome';
  content: "\f015";
}

css で次のように書くとアイコンが表示されます。

.hoge:before {
  font-family: 'FontAwesome';
  content: "\f106";
}

css で次のように書くとアイコンが表示されます。

.hoge:before {
  font-family: 'FontAwesome';
  content: "\f139";
}

アイコンを表示する方法は思いのほか簡単でしたね。「スタイルシート（css）を使ってアイコン表示をする方法」は急な修正に対応が効きやすいのでオススメです。

疑似要素（content）について詳しく知りたい方はこちらをどうぞ。
somegoro.hatenablog.com

生活情報オンライン