コピペだけでできる初心者のためのFontAwesomeの使い方

2023.03.29
コピペだけでできる初心者のためのFontAwesomeの使い方

Font Awesomeは初心者でも簡単に使えるツールです。

コピペして使える便利なアイコンを中心に紹介していきます！

Font Awesomeとは

Font Awesomeとは、アイコンを画像ではなく文字のようにサイトに表示させることのできるツールです。

Font Awesomeを使ったアイコン

Web上でこのようなアイコンを見たことはありませんか？

Font Awesomeとは簡単にこのようなアイコンの表示ができ、とても簡単に導入できるので使い方をマスターしましょう！

Font Awesomeのサイトはこちらです。

Font Awesomeでできることの例

まずはじめに、Font Awesomeのアイコンを使っているサイトの紹介をします。

どのようにアイコンは使われるのかイメージしましょう。

ブログでの使用例

ブログでの使用例

このようなSNSのアイコンもFont Awesomeで取り入れることができます。
SNSをやっていることがユーザーに伝わりやすいですね。

例に挙げたのはこちらのサイトです。
サンプルサイト（https://creativemarket.com/CityHouseDesign/505466-Milano-Wordpress-blog-theme）

ショップでの使用例

ショップでの使用例

ショップのサイトには検索マークをFont Awesomeで取り入れています。
例のように検索のアイコンを入れることでユーザーが検索しやすくなるかもしれませんね。

例に挙げたのはこちらのサイトです。
The ATLANTIC PACIFIC
（https://the-atlantic-pacific.com/）

ビジネスサイトでの使用例

ビジネスサイトでの使用例

ページ右上にアイコンがあります。

このようにFont Awesomeのアイコンには色をつけることや、サイズの変更もできます。

色やサイズの変更方法などのアイコンの編集は後半に説明します。

例に挙げたのはこちらのサイトです。
A Beautiful Mess
（https://abeautifulmess.com/）

Font Awesomeを少し加えるだけでも、ユーザーにとって使いやすいサイトにすることができます。

アイコンによっては、SNSを使っていることをユーザーに視覚的に伝えることもできます。

他にも多くのアイコンがあるので後ほど紹介します。

最新バージョンについて

現在のFont Awesomeには、最新バージョンの５があります。
旧バージョンの４は現在も使うことができますが、ここでは最新のバージョン５で説明をしていきます。
Font Awesomeの公式サイトはこちら。
参考 Font AwesomeFont Awesome

バージョン５のFont Awesomeには99ドル(約１万円)の有料版と無料版があります。
有料版には7020個ものアイコンがあり、本格的なサイトを作りたい方は購入をしてもいいですね。

無料版でも1535個ものアイコンがあり、サイトを作る上では十分な種類があります。

今回は無料版でも使えるアイコンを用いて説明していきます！

「独学でのプログラミング学習に苦戦していませんか？」

独学でのプログラミング学習の挫折率は9割以上と言われています。

✔プログラミングを身につけて、年収をUPさせたい
✔ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない

と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします！

完全無料なので、悩む前に今すぐ下のバナーをクリックして資料を読んでみてください！

＼簡単30秒／

下のバナーからLINE友だち追加をして、無料で限定資料をGET！

Font Awesomeを使う手順

Font Awesomeを読み込むにはいくつかの方法がありますが、ここでは一番簡単な方法を紹介します。

Step. 1 CDNで準備
Step. 2 アイコンの選択

とても簡単なので一つずつ説明していきます。

Step.1
Step.1
CDNで準備

一番簡単な方法は、CDNというものを使って読み込む方法です。
CDNとは簡単にいうと、インターネットを使ってWebの内容を配信するものです。

以下のコードを<head>タグの中に読み込みましょう。

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

コードは<head>タグの中に入っていれば良いので</head>の前にコピペをしましょう。

これでFont Awesomeを読み込む準備は完了です。

Step.2
Step.2
アイコンの選択

次にアイコンを反映させましょう。

アイコン

使いたいアイコンをこちらから選びます。

ここでは無料で使えるアイコンだけを使って説明します。

アイコンを選択すると出てくる画面

アイコンを選択するとこのような画面が出てきます。

右下にある”Start Using This Icon”をクリックします。

コードをコピーする

このコードをコピーしましょう。

例では<i class=”fas fa-map-marked-alt”></i>というのがアイコンのコードになります。

完成！

コピーしたコードを、アイコンを反映させたいHTML内にペーストすればこのようにアイコンが適応されます。

「プログラミング学習に苦戦しているあなたへ」

独学でのプログラミング学習の挫折率は9割以上と言われています。

✔プログラミングを身につけて、年収をUPさせたい
✔ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない

と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします！

完全無料なので、悩む前に今すぐ下のバナーをクリックして資料をGETしましょう！

＼簡単30秒／

下のバナーからLINE友だち追加をして、無料で限定資料をGET！

目的別のFont Awesome

Font Awesomeのアイコンページを見るとわかりますが、種類が沢山ありすぎて選べない、または見つからない、なんてことはありませんか？

ここからは目的別にFont Awesomeのアイコンを分けたので紹介します。

コードをコピペするだけで使えます！

SNS
 twitter <i class=”fab fa-twitter”></i>
 facebook <i class=”fab fa-facebook-f”></i>
 Instagram <i class=”fab fa-instagram”></i>
 YouTube <i class=”fab fa-youtube”></i>
メール  メール <i class=”far fa-envelope”></i>
 開封後 <i class=”far fa-envelope-open”></i>
メニュー  バー <i class=”fas fa-bars”></i>
 リスト <i class=”fas fa-list-ul”></i>
 下矢印  <i class=”fas fa-angle-down”></i>
 矢印 <i class=”fas fa-caret-down”></i>
チェック チェック１ <i class=”fas fa-check”></i>
チェック２ <i class=”fas fa-check-square”></i>
チェック３ <i class=”fas fa-user-check”></i>
いいね  ハート <i class=”far fa-heart”></i>
 いいね <i class=”far fa-thumbs-up”></i>
コメント コメント１ <i class=”far fa-comment-dots”></i>
コメント２ <i class=”fas fa-comments”></i>
ショップ  カート <i class=”fas fa-shopping-cart”></i>
  かご <i class=”fas fa-shopping-basket”></i>
 お店 <i class=”fas fa-store”></i>
 カード <i class=”far fa-credit-card”></i>
  トラック <i class=”fas fa-truck”></i>
 ゴミ箱 <i class=”fas fa-trash-alt”></i>

ここまで、良く使われるアイコンを中心に紹介してきました。探していたアイコンや、使いたいアイコン見つかったでしょうか？

まだまだ無料版には多くのアイコンがあります。
こちらから無料のアイコン一覧を見ることができます。
参考 無料で使えるアイコン一覧Font Awesome

アイコンの編集

例でも取り上げたように、Font Awesomeのアイコンには色を付けたり、サイズの変更、さらにアニメーションで動きをつけることも可能です。

コピペするだけで様々な編集ができる表もあるので参考にしてみてください！

アイコンの色を変える

まずはよく使われる、アイコンの色の変更です。

まずは、HTMLにアイコンのコードをコピペします。
以下のように” “の中に自分で考えたクラス名を入力します。

HTML 
<i class="fas fa-map-marked-alt ここに自分でクラス名を入力"></i>

次にCSSで色の指定をします。

CSS 
.自分で考えたクラス名 {
   color: blue
}

セレクタには、HTMLで自分で付けたクラス名を入れ、色を指定します。

これで、アイコンに色を付けることができました。

簡単なアイコンの編集コード

ここでは、以下の方法がコピペだけで表せられるようにしています。

・アイコンのサイズを変更
・アイコンの角度の調整
・アイコンの反転
・アイコンを線で囲う
・アイコンを重ねる
・アイコンの横幅を揃えて並べる

上記の表現は以下のコードをh蕩減することで

HTML 
<i class="アイコンのクラス名　ここにコードを追加"></i>

上のように

Font Awesomeのサイトでアイコンのコードをコピペしたら、以下のコードも図のようにコピペしてください。

これらの表し方は、アイコンに以下のコードをクラス指定し、コピペするだけで簡単に表現できます。
コピーしたコードを貼り付ける場所は、画像で示している” ”の中です。
スペースを空けるのを忘れないようにしましょう。

これらのコードを上記の場所にコピペしてください。

アイコン クラス名
サイズ変更 



<!-- アイコンにクラスを付ける　-->
fa-lg　　　<!-- 1.333…倍　-->
fa-2x 　　<!-- 2倍 -->
fa-3x 　　<!-- 3倍 -->
fa-4x 　　<!-- 4倍 -->
fa-5x 　　<!-- 5倍 -->
角度調整 

<!-- アイコンにクラスを付ける　-->
fa-rotate-90   <!-- 時計回りに90度の傾き -->
fa-rotate-180   <!-- 時計回りに180度の傾き -->
fa-rotate-270   <!-- 時計回りに270度の傾き -->
反転 
<!-- アイコンにクラスを付ける　-->
fa-flip-horizontal   <!-- 水平に反転　-->
fa-flip-vertical   <!-- 垂直に反転　-->
線で囲う 
<!-- アイコンにクラスを付ける　-->
fa-border
横幅を揃える 

<!-- アイコンにクラスを付ける　-->
fa-fw
アイコン サンプルコード
アイコンを重ねる
HTML

<!-- fa-stackというクラスを作ります -->
<span class="fa-stack">
　　<!-- fa-stack-2x　で背面アイコンを表示させます --> 
<i class="背面に来るアイコンコード　fa-stack-2x"></i>

 　　<!-- fa-stack-1x　で前面にアイコンを表示させます -->
<i class="前面に来るアイコンコード fa-stack-1x"></i>

</span>

Font Awesome Animation

Font Awesome Animationという、アイコンを回転させるなどのアニメーション効果を与えることができるツールがあります。

Step. 1 CDNの読み込み
Step. 2 コードをコピペ

使い方は通常のFont Awesomeと同じで、CDNを読み込み、コードをHTML上に書き込むだけです。

Step.1
Step.1
CDNの読み込み

このコードを<head>タグの中にコピペしましょう。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

これでFont Awesome Animationを読み込む準備ができました。

Step.2
Step.2
コードをコピペ

アイコンのコードを反映させたい場所のHTMLに読み込みます。

読み込む準備完了！
HTML 
<i class="アイコンのクラス名　アニメーションクラスの追加"></i>

上記のコードにあるよう、すでに入っているアイコンのクラス名に続いて、アニメーションのクラスを追加していきます。

以下のコードをコピペするだけで、簡単にアニメーションアイコンを使えるようになっています。

「クラス名」のコードをサンプルコードのように要素にコピペしてください。

アイコン アニメーションのクラス名 サンプルコード
スピン１ 
<!-- アイコンにクラスを付ける　-->
fa-spin
 
<i class="fas fa-spinner fa-spin"></i>
スピン２ 
fa-pluse
 
<i class="fas fa-spinner fa-pulse"></i>

まとめ

使いたいFont Awesomeのアイコンと、アイコンの編集は見つかったでしょうか？

アイコンをサイトに取り入れることで、ユーザーにとって使いやすいものになります。

無料で使えるFont Awesomeを使いこなして魅力的なサイトにしましょう！

DMM WEWBCAMPについて

DMM WEBCAMPは3ヶ月間で未経験から即戦力エンジニアを育成する転職保障付きのプログラミングスクールです。１ヶ月でプログラミング・Webデザインを学ぶ通い放題の「ビジネス教養コース」も展開しています。

関連記事

  • CSSを使ってHTMLのテキストを自動改行する方法について解説

    【コピペOK】CSSを使ってHTMLのテキストを自動改行する方法について解説

    2023.01.29
  • プログラミング 設計のアイキャッチ画像

    プログラミングの設計を解説！設計書の書き方やおすすめのツール7選も紹介

    2023.02.06
  • background-imageで背景画像を設定する方法

    【CSS】background-imageで背景画像を設定する

    2023.03.29
  • 「プログラミングに本はいらない」と言われる5つの理由を解説！活用方法も紹介

    「プログラミングに本はいらない」と言われる5つの理由を解説！活用方法も紹介

    2023.01.28

    • 資料請求

    • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

      DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

      資料をダウンロードする
    • IT技術がもたらす3つの変化と身につけるべきスキル

      IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

      資料をダウンロードする
    • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

      働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

      資料をダウンロードする

    資料請求一覧はこちら

    サービス紹介

    © 2023 WEBCAMP MEDIA Powered by AFFINGER5