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

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



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



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


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

アイコンを表示する方法

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

簡単3ステップ
1.HTMLファイル先頭にリンクを書く
2.HTMLのタグに任意のクラス属性を追加する
3.スタイルシートcss)で疑似要素を記載する

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

1.HTMLファイル先頭にリンクを書く

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

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

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


2.HTMLのタグに任意のクラス属性を追加する

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

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



3.スタイルシートcss)で疑似要素を記載する

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

カメラアイコン

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