コピペだけでできる初心者のためのFontAwesomeの使い方 | WEBCAMP NAVI
【7月枠も残りわずか】転職保証コース

コピペだけでできる初心者のための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には、最新バージョンの5があります。
旧バージョンの4は現在も使うことができますが、ここでは最新のバージョン5で説明をしていきます。
Font Awesomeの公式サイトはこちら。
参考 Font AwesomeFont Awesome

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

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

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

Font Awesomeを使う手順

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

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

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

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
アイコンの選択

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

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

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

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

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

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

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

完成!

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

 

目的別の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>
チェック チェック1 <i class=”fas fa-check”></i>
チェック2 <i class=”fas fa-check-square”></i>
チェック3 <i class=”fas fa-user-check”></i>
いいね  ハート <i class=”far fa-heart”></i>
 いいね <i class=”far fa-thumbs-up”></i>
コメント コメント1 <i class=”far fa-comment-dots”></i>
コメント2 <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
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
コードをコピペ

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

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

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

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

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

 

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

 

まとめ

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

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

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

DMM WEWBCAMPについて

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

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率は98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 12019年4月時点