副業

Font Awesomeの使い方

今回はサイトにSNSアイコンを表示させたい時などに使う「Font Awesome」の使い方について簡単すぎるくらいにまとめました。
Font Awesomeを使えるようになるとサイト作成時デザインの幅が広がります。

この記事でわかること

  • Font Awesomeの使い方がわかる
  • サイトにアイコンを表示させることができる

 

完成イメージ

私のブログでもこの部分にツイッターのアイコンを表示させてます。
よく見かけるのはヘッダーメニューにアイコンを表示させているページでしょうか。
そういったちょっとした味付けができるようになります。

手順

①利用するアイコンを検索

https://fontawesome.com/
まずは上記リンクよりFont Awesomeを開きます。
ヘッダーの中にある「icons」をクリックします。

無料のアイコンを使うのであれば左のサイドメニューにある「Free」をクリックしてから検索します。
日本語ではなく、英語で検索をするのがコツです。
twitterやinstagramならそのまま検索すれば出てきます。

②選んだアイコンをサイトに表示させる

最初にサイトの<head></head>の中に下記を追加するのを忘れないようにしてください。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

後はアイコン表示用のhtmlをコピーして表示したい箇所に張り付けるだけです。

赤枠にマウスを持っていくとクリックでコピーができます。
たったこれだけでサイトへアイコンの表示ができます。

 

-副業

© 2021 ゆとりーマンの日常 Powered by AFFINGER5