webデザイン初心者|sometimes study

webデザイン初心者の私が一人前になるまでの記録。webデザイン(Illustrator・Photoshop)・webサイト制作(HTML・CSS・JavaScript・jQuery・PHP・WordPress)を中心にお勉強中。

Font Awesome - サイト制作の救世主!種類豊富なアイコンフォントの使い方&カスタマイズ方法

webサイトを作るうえで、手間のかかる作業のひとつ『画像制作』。

 

私はピクトグラムのように、パッと伝えたい意図がわかるアイコンが大好きで、どこにでも登場させます。

 

しかし、アイコン画像を一から作っていると、あっという間に時間が過ぎ去っていきますよね…今回はそんな時のお助けサービス『Font Awesome』をご紹介します!


Font Awesome(フォント オーサム)

f:id:serinaishii:20150917182618p:plain

 

こちらが『Font Awesome』のトップページ。

 

そう、ご覧のとおり海外サイトです。私と一緒で全面英語のページに拒否反応がでてしまう方も、少し我慢して先に進んでください(;O;)

 

たったひと手間で豊富なアイコンが使い放題な優秀サービス!しかも全て無料!

 

1度知ってしまったらもう離れられないくらい。便利すぎて感動します。

 

fontawesome.io


前準備

f:id:serinaishii:20150917182647p:plain

 

まずは黄色い四角で囲んである『Get Started』から、前準備のページに進みましょう。

 

少しスクロールすると、下のような画面が出てきます。CDNとかCSSとかSASSとかLESSとか色々あるけど、今回使うのは『CDN』という1番上の項目。

 

↓の画像ではピンク色で囲ってある部分です。

 

f:id:serinaishii:20150917182659p:plain

 

下記のlinkタグを、HTMLの<head></head>内に埋め込みます。

 

念のため、[ Get Started with Font Awesome ]から最新のコードを確認してください。

 

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

 

※他サイトさんでたまに『https』が抜けたソースを見かけますが、これがないとローカル環境(サーバーにUPする前)ではFont Awesomeが表示されませんのでご注意を!

 

準備はたったこれだけ!このひと手間で600種類近くあるアイコンフォントが使い放題です!!

 

CDN(Contents Delivery Network)とは

 

自分のサーバーにCSSJavaScriptのファイルをアップロードしなくても、URLからサーバーを介してコンテンツを利用できる方法です。

 

CSSをダウンロードして使いたい場合

 

自分のサーバーにCSSをアップロードして利用したい方は、『Font Awesome』トップページのすぐ下にあるダウンロードボタンからファイルを取得して、必要なファイルを設定してから先に進んでください。

 

記載事項は上の画像でいう水色の枠の中の、これまた黄色い枠に囲まれているlinkタグです。


アイコンを選んでみる

準備ができたら、実際に[ Font Awesome Icons ]からアイコンを選んでみましょう。

 

ナビゲーションの『Icon』から下記のページに行くことができます。

 

f:id:serinaishii:20150917182717p:plain

 

 目移りするほどいろんなアイコンがありますね!

 

使いたいアイコンが見つかったらクリックして、コードが書いてあるページに飛びます。

 

f:id:serinaishii:20150917182725p:plain

 

今回は『fa-bookmark』という、リボン型のアイコンを使ってみることにしました。

 

<i>タグをコピーして、自分が使いたいHTML(<body></body>)内に記述します。

 

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

 

すると…こんな感じのかわいいブックマークアイコンが出現するはずです!

 

 


種類が豊富!こんなアイコンまである!!

よく使う矢印アイコンから、facebookchromeyoutubeのアイコンまで様々。

 

  fa-arrow-right
  fa-check-square-o
  fa-hand-o-up
  fa-phone
  fa-shopping-cart
  fa-chrome
  fa-facebook-official
  fa-youtube
  fa-amazon


Font Awesomeをカスタマイズしてみる

Font Awesomeにはちょっとたアレンジ専用のclassが割り当てられているので、class名を追加するだけで簡単にカスタマイズすることができます!

 

サイズや色、角度の変更や、くるくるとまわり続けるような動きまで色々あります。

サイズを変更する

専用のclass名を使用すれば、アイコンの大きさを簡単に変更することができます。もちろん自分でclass名・CSSを追記すれば、好きな大きさに変えることも可能です。

  • 1.5倍: fa-lg
  • 2倍: fa-2x
  • 3倍: fa-3x
  • 4倍: fa-4x
  • 5倍: fa-5x

<i class="fa-5x fa fa-apple"></i>

 

元の大きさ

 

 

 

1.5倍

 

 

 

2倍

 

 

 

5倍

 

 


色を変更する

classを追加することでアイコン色の変更もできます。こちらだけは自分でスタイルシート(CSS)を記述する必要がありますが、やり方はfont色の変更と何ら変わりありません。

 

↓ HTML側の記述

<i class="fa-skyblue fa fa-wordpress"></i>

 

CSS側の記述

.fa-skyblue { color : #45B7DD; }

 

 


常にくるくると回転させる

 

画像を常に回転して表示させることができるので、ロード画面のような表現も簡単にできてしまいます!

 

<i class="fa-spin fa-spinner"></i>

 

 

はてなブログだとなぜか上手く表示できていないのですが、実際は中央を軸として回転します。


向きを変える

右に90度、180度、270度と回転させて向きを変更することができます。

  • 90度: fa-rotate-90
  • 180度: fa-rotate-180
  • 270度: fa-rotate-270

<i class="fa-rotate-180 fa fa-apple"></i>

 

元のアイコン

 

 

 

90度

 

 

 

180度

 

 

 

270度

 

 

はてなブログだとなぜか上手く表示できていないのですが、実際は中央を軸として向きが変わります。


反転させる

  • 水平方向: fa-flip-horizontal
  • 垂直方向: fa-flip-vertical

<i class="fa-flip-horizontal fa fa-music"></i>

 

元のアイコン

 

 

 

水平方向

 

 

 

垂直方向

 

 

はてなブログだとなぜか上手く表示できていないのですが、実際は中央を軸として反転します。


アイコンを整列させる

元々は全てのアイコンの横幅(空白部分)が違うのですが、クラスを追加することですっきりとキレイなリストに整列させることができます。

 

<i class="fa-fw fa fa-apple"></i>

 

元のアイコン

 

  HOME

 ABOUT

 SERVICE

 ACCESS

 CONTACT

 

整列させたアイコン

 

  HOME

 ABOUT

 SERVICE

 ACCESS

 CONTACT

 はてなブログだとなぜか上手く表示できていないのですが、実際はアイコン自体がきちんと中央揃えになります。


最後に

ここ2週間くらいなかなかブログを更新できていませんでしたが、やっと落ち着いたのでまた更新していきたいと思います!

 

昇華できてないので、記事にしたいネタはたまる一方!!

 

学校で1ヶ月ほど前からサイト制作の課題をしていて、ここ1週間くらい寝たの2時過ぎとかでした(´・_・`)

 

没頭しちゃった日は学校から帰って、朝の4時半までずっとサイト制作してたこともありました!

 

何かを創り出す楽しさと、壁にぶつかったときの苦しみの狭間で一喜一憂する忙しい2週間。でも確実に成長できた2週間!

 

きちんと本サーバーにUPしたらまた記事にてご紹介したいと思います!