fontawsome活用法
WEBfontawsomeとは
fontawsomeはwebページによく使われるアイコンやロゴのデザインを基本無料で使うことができるサービスになっています。(例えば、オンラインショップに使われるカートマークや、SNSにクリックしたら開けるようになっているロゴマークによく使われます。)
サイトを設計する人からするといちいちアイコンを自分でデザインする労力が削減dできるので助かっている面があります。(汎用なアイコンが多くオリジナリティの部分でのデメリットはあるのかもしれない)
利用の仕方
fontawsomeのCSSをリンクさせる
まず最初に自分が使いたいwebページのheadタグの中に
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
上記のコードを記入しますこれによってfontawsomeで使われているCSSを呼び出すことができます。
fontasomeのサイトを開く
上記のリンクがfontawsomeのリンクになっています。これを開き検索部分から必要なアイコンを検索できます。
ちなみにこのサイトは主に英語で書かれてあるため検索のワードも英語で書かないと引っかからないと思います。
アイコンのコードをコピーアンドペースト
必要なアイコンが見つかったら<i>タグで表示されているコードをコピーアンドペーストします。サイズを変更したい場合は<i>タグのクラスの中にfa-2x,fa-3x(数字が大きくなるにつれサイズが上がっていきます。)と記入します。
ちなみに色を変える場合は<i>タグのクラス名からtext-colorプロパティで変更することができます。
まとめ
fontawsomeはwebページを作成するのにはとても便利なサービスなのでとてもおすすめします。