WEB 作りたい

【超簡単】WEBアイコンフォント「FontAwesome」の使い方を簡単にご紹介

WEBアイコンフォント「FontAwesome」の使い方

ホームページの制作において欠かせないのがアイコン!
昔は画像に書き出して、文字づらと合わせるように微調整のcssを記述して…と
手間のかかる作業をしていましたが、もうそんな作業は必要ありません。
WEB上にアップされているアイコンフォントを呼び出し、簡単にアイコンを表示させましょう。HPの制作時間も大幅に短縮されます!

まずはサクッと導入方法から

下のたった1行のコードを<head>タグ内に記述。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

これで準備は完了です!超簡単!

あとはFontAwesomeのホームページから使いたいアイコンのコードをコピーし、htmlにペーストするだけ!

FontAwesomeのアイコン一覧画面のキャプチャ

無料版のみを使用する場合は、左のメニューナビから「Free」を選択すると
使用できるアイコンが一覧で表示できます。

検索バーの下にヒット数が表示されますが、アイコンの種類はなんと5,365種類。
無料アイコンだけでも1,534種類も用意してくれております。

FontAwesomeのアマゾンアイコンの画面キャプチャ

使用したいアイコンのページからhtmlコードをクリックしコピー
あとはhtmlにペーストするだけです。

<i class="fab fa-amazon"></i>

ね!簡単でしょ!
もちろん通常の文字と同じように、サイズや色もcssで調整可能です!
なのでこんなことも↓↓↓

ちょっとした応用技

通常の文字としてcssで制御できるのが最大の利点ですよね。
正直、僕(daruma108)はcssとして今まで一度も使ったことのない機能だったのですが…

左右反転

文字を左右反転することは、あまり無いとは思うのですが、
アイコンなら反転したい!と思うことあると思います!
例えば、右上向きのヒコーキを反転すると

 

こんな感じです!
上下に反転することは滅多に無いとは思いますが、
左右は好みで反転できると便利ですね。

 

コードはcssに下の1行を追加するだけです。

div {
 transform: scale(-1, 1);
}

まとめ

いかがでしたでしょうか。
サーバー上にアップされているアイコンをフォントとして使用できるのはすごく便利!ちなみにアイコンをダウンロードし、自分のサーバにアップし使用することも可能です。

いくつかの会社からリリースがあり、使用方法はほぼ同じなので、デザインの違いで選べば良いと思います。

あわせて読みたい!
スマホで撮影しフォントを調べられるアプリ「What The Font!」
スマホで撮影しフォントを調べられるアプリ「What The Font!」

続きを見る

ご覧いただきありがとうございました。

htmlやcssなど「プログラミングを学んでみたい」という方には、無料体験が受けられるプログラミングスクールがオススメです。

無料体験があるプログラミングスクール

※無料体験だけならいっさいお金はかかりません。

誰でもホームページの更新ができるようにする方法【googleドキュメント簡単活用術】

WEB 作りたい

2022/9/11

自社で更新できるホームページ作成【Googleドキュメ...

今、再注目のアニメーションGifの素材サイトまとめ【フリー】

design WEB 作りたい

2022/9/3

今、再注目のアニメーションGifの素材サイトまとめ【フ...

360度画像をホームページで埋め込み公開する方法まとめ【insta360】

WEB カメラ 作りたい

2022/4/21

撮影した360度画像をブログ・ホームページに公開する方...

【初心者向け】HTMLにJavaScriptを適用する方法を2パターン紹介

WEB 作りたい

2021/6/27

【初心者向け】HTMLにJavaScriptを適用する...

電話番号への自動リンクを無効にする方法【iPhone・edge】

WEB

2022/7/18

電話番号への自動リンクを無効にする方法【スマホ】

-WEB, 作りたい
-