CSS WEBデザイン スクリプト

無料でいろんなアイコンをWebフォントとして使える「Font Awesome」が便利だなーって話

2019年2月11日

font awesome トップ

https://fontawesome.com/ カタカナで書くと、フォントオーサム。僕の名前は皆川オーサム。
普通のWebサイトではあまり使う場面はないかもしれませんが、スマホアプリやブラウザアプリやなんかでアイコンをたくさん使いたいときに、いちいちアイコン画像を作成して画像を透過PNGやSVGで保存してimgタグで・・・っなどなどの面倒な記述の必要のない、「WEB Font」としてhtmlで読み込んでクラス指定して簡単にアイコンを表示させることができるサービスです。しかも無料でたくさん。有料版だともっと強力な使い方ができそうです(有料版は使ったことないけど)。

Font Awesomeの使い方

サイトは英語版しかないですが、英語あんまりわかんなくてもなんとなくわかると思いますので、ざっくりとした使い方とデモ。

https://fontawesome.com/のホームから「Start Using Free」へ進むと「Start A New Project」という画面に進みます。

まずはこの画面に書いてあることを、アイコンを使いたいHTMLファイルに設定しろってことです。まあざっくり言えば、真ん中の<link>タグのコードをコピーして、HTMLファイルの<head>内側に記述してね!ってこと。
それで準備OKです。

使いたいアイコンを探す

https://fontawesome.com/icons で使いたいアイコンを探しましょう。

たくさんあるのでキーワードやカテゴリーで探すと良いでしょう。ただし「PRO版」は有料ですので、今回やってるのはFree版なので使えません。それでも豊富なのでまったく問題ないと思いますが。
左サイドメニューの「Free」をクリックして無料版だけに絞り込めば早いですわな。

というわけで、Amazonのマークがあったので試しにそれをクリック!

「Start Using This Icon」をクリック!

モーダルウィンドウが開いて「このHTMLをコピーしてこのアイコンを使いやがれ」って書いてるとおり、<i class="fab fa-amazon"></i> をHTMLファイルのアイコンを表示したい場所に書く!

CSSで指定された文字サイズに準じた大きさで表示されますが、WebフォントなのでもちろんCSSでサイズや色など指定できます。例えばインラインで「<i class="fab fa-amazon" style="font-size:400px;color:#ffcc00"></i>」って書いたとしたら、でっかくて黄色いAmazonになる

となります!わあ!便利!SVGフォントだから大きくしても大丈夫!
もちろんクラス指定でもOKですので、いろいろ試して遊んでみたら、楽しい使い方思い浮かぶかも。

-CSS, WEBデザイン, スクリプト
-

Copyright© MDBloG , 2020 All Rights Reserved Powered by AFFINGER5.