Font Awesome

【簡単3ステップ】Font Awesome の使い方

 

ここでは Font Awesome の使い方を簡単3ステップで紹介しています。

 


 

 

Font Awesome とは?

Font Awesomeとは、簡単にアイコンを利用できるサービスです。
 

  • 自分のウェブサイトに少しだけアイコンを使いたい
  • 自分でアイコンを作るのは面倒
  • 著作権やクレジット表記がよくわからない

という方にオススメです。
 

Free(無料)と Pro(有料)の2つが用意されていますが、無料のものだけでも 1500 種類以上のアイコンが用意されています。

SNS アイコンから顔文字まで、ファイルを1つ読み込むだけで簡単に利用できるので、ぜひ使ってみてください。
 
 

使い方:簡単3ステップ

Step 1:Font Awesome を読み込む

「Font Awesome」を検索、または https://fontawesome.com/ にアクセスして、「Start Using Free」をクリックします。


 
 

コードが表示されたら、<head>タグ内に貼り付けます。


 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Sample</title>
    <!-- ↓ ここに貼り付けます -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
</body>
</html>

 
 

Step 2:使いたいアイコンを決める

次に使いたいアイコンを見つけます。

メニューの「Icons」をクリックすると、アイコンの一覧を確認できます。
 

黒く表示されているアイコンが無料、薄いグレーになっているアイコンが有料のものです。


 
 

キーワードで検索することもできるので、使いたいアイコンを探してみてください。
 

検索の例

  • SNS アイコン →「Social」で検索
  • 矢印アイコン →「Arrows」で検索
  • 手のアイコン →「Hands」で検索

 
 

使いたいアイコンが見つかったら、アイコンをクリックします。


 
 

Step 3:コードをコピー&ペースト

<i class="fab fa-twitter"></i> のようなコードがあるので、クリックしてコピーします。


 

コピーしたコードをアイコンを表示したい場所に貼り付ければ完了です。
 
 

例えば Twitter ようなリンクを作りたい場合は

<a href="#"><i class="fab fa-twitter"></i> Twitter</a>

 

と書けばリンクを作成できます。

 
 

以上が Font Awesome の使い方です。

アイコンの種類が多くて、日本語で検索できないのが少し面倒かもしれませんが、ほとんどのアイコンは Font Awesome で見つけることができます。

アイコンはウェブサイトの使いやすさにも影響するので、ぜひ Font Awesome を使って素敵なサイトにしてみてください🙂
 
 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です