Blog

fontawsome活用法

WEB

fontawsomeとは

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のサイトを開く

https://fontawesome.com/

上記のリンクがfontawsomeのリンクになっています。これを開き検索部分から必要なアイコンを検索できます。

ちなみにこのサイトは主に英語で書かれてあるため検索のワードも英語で書かないと引っかからないと思います。

アイコンのコードをコピーアンドペースト

必要なアイコンが見つかったら<i>タグで表示されているコードをコピーアンドペーストします。サイズを変更したい場合は<i>タグのクラスの中にfa-2x,fa-3x(数字が大きくなるにつれサイズが上がっていきます。)と記入します。

ちなみに色を変える場合は<i>タグのクラス名からtext-colorプロパティで変更することができます。

 

まとめ

fontawsomeはwebページを作成するのにはとても便利なサービスなのでとてもおすすめします。

 

 

広告

←BLOG TOP に戻る

←TOP PAGE に戻る

広告