画像を使わずHTML/CSSだけを使ってアイコンを表示する!Font Awesome がとても便利!

  • このエントリーをはてなブックマークに追加

Webフォントの時代。通常は自分の持っているパソコンにインストールされているfontを使ってブラウザの文字は表示されています。そのため、パソコンが異なる環境だと表示するフォントが限られてきます。一般の方のパソコンに入っているフォントを使おうとなるわけです。

大きく違うのは、WindowsとMac。などの機械やOSの違い。またインストールされているソフトによってもフォントは入っている、入ってないが決まってきます。できれば、そういうことを気にせず、このフォントでホームページを表示したい!というのは節なる願いで、そこに最近登場している手法がWebフォント。フォントファイルを読み込ませてCSSで指定をすることによって表示させるといいものです。

Web フォントについては、こちらで詳しく解説中。

そのWebフォントにアイコンが存在します。そのフォントデータをサーバにアップ。もしくは呼び出しておいて、そのフォントデータをHTML内配置するというものです。文字の扱いと同じな為、CSSでfont-sizeを変更したり、color  配置などを扱うことができ、とても幅広く使われています。

今回はその中でもメジャーな Font Awesome をご紹介します。

Webアイコン Font Awesome を設定してみよう

 

スクリーンショット 2015-12-19 10.47.11

Font Awesome

605種類以上のアイコンを表示できます。アイコンは常時追加されているので、まだまだ増える可能性の高い Font Awesome。様々なサイトで見かけるアイコンは、多くのWebデザイナーが利用している証のようなものです。トップページにDownload ボタンからダウンロードすると一揃えセットで入っています。こちらをサーバにアップロードする方法もありますし、こちらのサイトでは、ナビゲーションにある Get Stated をクリックして、CSSファイルの読み込みを行うことができます。

スクリーンショット 2015-12-19 10.53.46

Get Statedページをクリックして、少しスクロールを下げたところに

スクリーンショット 2015-12-19 10.54.57

下記の部分を選択して、HTMLファイルに貼り付けるだけで準備は OKです。

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

WordPressなどで使う場合は、外観のCSS編集に

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";

とコピーペーストして使っていくこともできます。

アイコン例 使ってみよう!

  • fa-phone-square
  • fa-phone
  • fa-shopping-cart
  • fa-credit-card
  • fa-arrow-right
  • fa-arrow-circle-o-right
  • fa-envelope-o
  • fa-rss

などなど、小さな画像をイラストレーターで作ってスライスしてHTMLに<img>で貼り付けるという手間は全て吹っ飛んでしまいます。

Webアイコンを使いた場所のHTMLに下記のコードを貼り付けるだけ

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

上記コードで、 を表示させることができます。

コードは、Font Awesome 内のiconsというページを開いて、一覧から、該当のアイコンをクリックするだけ

スクリーンショット 2015-12-19 13.01.38

例えば coffee と検索ボックスに入力すると

スクリーンショット 2015-12-19 13.03.22

アイコンが出てきますので、そのアイコンをクリックして

スクリーンショット 2015-12-19 13.04.27

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

上記コードをコピーペーストです。大きさを変更したり、色を変えたりしたい場合は、 class 名の faとfa-coffee を使います。 fa の方は、全てのアイコンについているクラスなので、統一した内容を、fa-coffee は、このコーヒーアイコンのみについているclassなので、特別性をもたせた方が効率的です。

Classがよくわからないという方は直接、CSSにstyleを書いても大丈夫です(あまりオススメはしませんが)

<i class="fa fa-coffee" style="font-size:500%;color:red">Cofee Shop</i>

Coffee Shop

画像をスライスしたり、作成して呼び出す手間を考えると非常に便利なWebアイコン

Webサイトのデザインもより一層クールなものに変わりますので、ぜひお試しください。

 

  • このエントリーをはてなブックマークに追加

%d人のブロガーが「いいね」をつけました。