HTMLのみでアイコンを表示させる方法。時計・家・カメラなど

今回の記事では、次のようなアイコンを使う方法をご紹介します。

アイコンを自由に使えることが出来れば表現の幅が大きく広がることでしょう。上記アイコン以外にも沢山の種類のアイコンが使用できます。それらの方法をまとめてご紹介します。ですので、きっとご自分の好きなものも見つかると思いますよ。

アイコンを表示する方法

アイコンを表示する方法はいくつかあります。この記事では「HTMLのみを使用して表示する」方法を記載します。この方法では次の２ステップで済みますのでとても簡単です。

簡単２ステップ
１．HTMLファイル先頭にリンクを書く
２．アイコンを表示したい場所にタグを書く

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

１．HTMLファイル先頭にリンクを書く

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

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

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

２．アイコンを表示したい場所にタグを書く

アイコンを表示したい場所に次のようにタグを書きます。具体的な書き方として６種類とりあげます。

カメラアイコン

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

<i class="fa fa-camera-retro"></i>

チェック

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

<i class="fa fa-check-square-o"></i>

時計

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

<i class="fa fa-clock-o"></i>

家

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

<i class="fa fa-home"></i>

上へ

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

<i class="fa fa-angle-up"></i>

上へ（丸囲み）

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

<i class="fa fa-chevron-circle-up"></i>

アイコンを表示する方法は思いのほか簡単でしたね。次のサイトFont Awesome IconsでアイコンをWEB上にアップしてくれています。記事で取り上げたアイコンの他にもたくさんのアイコンがあります。気になる方はサイトの icons タブから確認してみてください。
fontawesome.io

CSSでアイコン表示したい方はこちらへどうぞ。
somegoro.hatenablog.com

うまくアイコン表示されない方へ

上記の方法でやってみて、望むアイコンが表示されずに□で表示されてしまった方はいますかね。私自身が最初にやったときにそのようになりました。これは手順「１．HTMLファイル先頭にリンクを書く」が上手くできていないことが原因です。ですので、もう一度その部分を確認してみてください。

デザイン編集は時間がかかりますよね。それはアイコンを取り入れて表現の幅を広げるとさらに助長されます。そして、編集してたらいつのまにか夜中なんてことが多々あることでしょう。色々なことが絡み合い時間のかかる原因になっていると思いますが、その内の一つとして「デザインルールが決まっていないから」ということはないでしょうか。