HTML&CSS アイコンフォントFontAwesome 5を数秒で使えるようにする方法

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした

有名なWebアイコンフォントにFontAwesomeがあります。アイコン画像をつくる必要がないのでとても便利です。

Twitter, Facebookなど、有名な企業や製品のロゴも無料で使えます。また、CSSで自由に色を設定することもできます。

バージョン5からLINEのアイコンも追加されました。

今回は、FontAwesomeの設定方法から使い方まで、ソースコードサンプルを使いながら、だれでも分かるようにかんたんに説明します。

FontAwesomeはバージョンと5と4では準備の仕方、使い方が違います。今回は、バージョン4は古いので説明しません。

アイコンフォントとは? Webフォントとは何か?

説明はいらないという人はジャンプ。

まずは、通常のフォントの仕組みから。フォントはそれぞれの端末の中にファイルとして保存されています。Webサイトを見るときに、ブラウザは指定されたフォントに近いものを端末から探してそのフォントで表示します。

一方Webフォントは、端末に保存されているフォントを使いません。インターネット上で公開されているファイルを読み込んでから表示します。実際は、CDNの形で配布されています。

具体的には、配布されているCSSファイルをHTMLの<head>タグに<styles>タグを追加して読み込みます。

CDN(Content Delivery Network)

テキスト・動画・画像などあらゆる形式のファイルを大量に早く配信する仕組みのこと。

以前は、必要なコンテンツ(ファイル)をいったん自サーバへ置いて配信する形が主流だったが、近年は必要なコンテンツを自サーバーに置かず、ネットワークを通じてコンテンツの配信先とつなぐことで簡単にコンテンツを配信できる。

コンテンツ配信サービスをする側にとっては、自サーバーにコンテンツを集める必要がないのでコストが安くなる。

またコンテンツを配布している方は、キャッシュや近くにあるサーバーから配信する仕組みなどがあるので、サービスを提供する側はあたかも自分がコンテンツを持っているかのようにふるまえる。

最近はCSSファイルも、CDNを使って自サーバーには置かないことが多い。

Webフォントは、どんな端末で見ても同じフォントで表示できるメリットがあります。統一されたデザインをいろいろな端末で表現できます。

ただし、ネットワーク上にあるフォントファイルを使うので、ネットワーク環境が悪いと表示が遅くなるデメリットがあります。

もうひとつのアイコンフォントは、字のとおり『アイコン』のフォントです。絵文字と同じ仕組みと思っていいです。

アイコンを1文字として表現するので、画像で作ったアイコンよりも少ないサイズで速く表示できるメリットがあります。アイコンフォントは、『文字』なのでCSSで色やサイズも変更できます。

FontAwesome 5の準備

今回は、数秒で使うことを目的にしているので一番かんたんな方法をご紹介します。

まずは、FontAwesomeのサイトでHTMLに貼り付けるコードを取得します。

FontAwesomeスタートアップ image
FontAwesome5のコード取得

サイトでは、

  • Free
  • All
  • Webfont
  • 最新のバージョン

を選びます。これをコピーして、HTMLのヘッダ(<head>)に追加してください。できればサイトの全ページ共通でつかう<head>に貼り付けてください。

コードの右下のマークを押すとコピーできます。

貼り付け例
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

WordPressなら、header.phpの<head>タグ内の1か所に貼り付けるだけです。そのほかでも同じようなテンプレートに貼り付けてください。

個別のページに貼り付けると、アイコンフォントを使うページ数分の貼り付け作業が発生するので面倒です。

次は、CSSです。bodyタグのfont-familyに

  • "Font Awesome 5 Free"
  • "Font Awesome 5 Brands"

を追加します。(CSSでアイコンを使うときの設定です。)

CSSの変更例
body {
  font-family: Roboto',"游ゴシック体",YuGothic, "Font Awesome 5 Free", "Font Awesome 5 Brands", sans-self;
}

これで設定は終わりです。もうあなたのサイトでアイコンフォントが使える状態です。本当に数秒で終わりました。(最初は1分ぐらいかかりますが)

font-familyには、sans-self(self)の直前、後ろの方に追加してください。前の方に入れると、普通の文字がアイコンで表示されることがあります。

FontAwesome5では無料版(Free)と有料版(Pro)があります。そして4つのタイプがあります。

タイプFree/Profont-family概要
SolidFree"Font Awesome 5 Free"一番見た目が太い。重たい感じがする。
RegularPro"Font Awesome 5 Free",
"Font Awesome 5 Pro"
普通の太さ。Freeでも使えるものがある。
LightPro"Font Awesome 5 Pro"細い。すっきりしている。見た目がきれい。
BrandsFree"Font Awesome 5 Brands"Facebook, Twitter, LINEなどのブランドロゴ。世界的なロゴはだいたいある。

Free版はほとんどのRegularとすべてのLightが使えません。それでも十分なアイコンの量があるので、よっぽどPro版で使いたいものがないかぎり必要ありません。

コード取得では個別にもコードが発行されますが、分ける意味はあまりありません。Allでいいです。

FontAwesome一式をダウンロード、サーバー上にアップロードしてそれを読み込んで使う方法もあります。

でも、この方法はすぐに使えるほど設定が簡単ではないので今回は見送ります。

この方法は、Fontawesomeのサーバーにアクセスしないで自サーバー上のCSSを使うので表示が早くできると言われますが、FontAwesomeのCDNでCSSをダウンロードしても問題はありません。(コード取得&貼り付けの方法のこと)

アイコンが表示されるのが若干遅れて表示されるのが気になる場合は必要でしょう。

ただし、初期設定も面倒ですがFontAsesomeのバージョンアップ作業も面倒です。

FontAwesome 5の使い方

FontAwesomeには2つの使い方があります。

  • HTMLにタグで指定する
  • CSSにコードで指定する

方法です。

HTMLにタグで指定する

じっさいに、アイコンフォントを表示していきましょう。サンプルでは、FontAwesomeのバージョン5から追加されたLINEのアイコンを表示します。

まずは、FontAwesomeのサイトで欲しいアイコンを検索します。

fontawesome5 use image
アイコンの検索

左の条件でFreeを選びます。この検索はFreeもProもぜんぶ対象になるので条件を指定しましょう。ほかにもいろいろな条件があるので好みに合わせてください。そして検索窓で『line』を入力すると検索が始まります。(検索ボタンはありません。)

LINEのアイコンが最初にヒットしています。これをクリックしてアイコンの詳細画面に行きます。

fontawesome5 use image
アイコンの詳細画面

上の方に

  • 4桁のコード(f3c0)
  • <i class...></i>タグ
  • ダウンロードボタン

があるので、<i>タグをクリックします。するとHTMLに貼り付けるタグがコピーされるのでそれをHTMLに貼り付けます。

アイコンを表示するHTML
<div><i class="fab fa-line"></i> LINE</div>

アイコンは色やサイズも変更できます。CSSも用意します。

CSS
.fa-line {
    color: #1dcd00;
    background: #fff;
    font-size: 50px;
}

色はLINEのブランドカラー、背景色は白です。(吹き出しが白になる)

LINEの吹き出しの部分はデフォルトは透明です。アイコンの詳細画面をみると、吹き出しの部分に網目が見えると思います。背景の網が透けて見えるものは透明になります。

HTMLの結果です。

HTML結果
LINE

LINEのアイコンが表示されましたね? これがFontAwesomeの一般的な使い方です。

準備のところでCSSのfont-familyを指定していますが、<i>タグを使う場合は不要な設定です。

公式ドキュメントや、Fontawesome5の使い方を説明しているものの中には、Free版はRegularが使えないと言っていますが、じっさいには使えるものもあります。

(公式ドキュメントがなぜ更新されていないのか不思議ですが。)

FontAwesome5 use image

Regularのアイコンの詳細画面で右側のタイプに『Pro』マークがついていないものはFree版でも使えます。

CSSの::before, ::afterのcontentプロパティで指定する

もうひとつ、一般的な使い方にCSSで直接文字列などを書き込む方法があります。::before, ::afterのcontentプロパティです。これにFontAwesomeのアイコンを指定して表示することができます。

かんたんなHTMLを用意します。

HTML
<div class="fontawesome">LINE</div>

このままでは『LINE』という文字しか表示されません。これにCSSでアイコンを追加します。

CSS
.fontawesome::before {
    font-family: "Font Awesome 5 Brands";
    content: '\f3c0';
    color: #1dcd00;
    background: #fff;
    font-size: 50px;
    margin-right: 10px;
}
  • font-familyに"Font Awesome 5 Brands"を指定
  • contentに4桁のコードを指定。(最初に"\"が必要です。『ろ・\』キー(テキストエディタだと半角¥のキー)。)

HTMLを実行します。

CSSでアイコン追加
LINE

さっきと同じものができました。CSSで使う場合はひとつ注意が必要です。

CSSのfont-weightプロパティが合っていないと表示されない。(□が表示される。)

FontAwesomeはバージョン5から4つのタイプに分かれました。そしてこのタイプはそれぞれ適切なfont-weightを持っています。

タイプfont-weight
Solid900(700で使えるものもある)
Regular400
Light300
Brands400

Solidは700でも表示できるアイコンがあります。もし太すぎて気に入らない場合はためしてみてください。

<i>タグを使ってアイコンを表示する場合は、font-weightは不要です。すでに読み込むCSSファイルの中で、iタグのクラスのfont-weightで指定されています。

400はfont-weightプロパティのデフォルト値なので未指定でも表示されます。LINEアイコンはBrandsなのでサンプルでは未指定です。

アイコンが表示されないとき

  • font-familyは合っているか?
  • font-weightは合っているか?
  • contentの最初に"\"があるか?
  • cssはちゃんと読み込んでいるか?

を確認してください。

font-familyは、bodyで指定しても途中で上書きされることがあります(WordPressではとくに)。その場合は、サンプルのように直接font-familyを指定します。

contentにコードを指定する場合は、コード指定を意味する"\"が必要です。よく間違うのがスラッシュ"/"です。正解は半角スラッシュの右となりのキーの"\"です。

CSSがAllではなくsolidのCSSを使っている場合、ブランドロゴは表示されません。□が表示されます。

その他の使い方

そのほかにも使い方はあります。svg形式の画像での使い方です。アイコン詳細画面の<i>タグコピーの右側のダウンロードマークをクリックすると.svgファイルがダウンロードできます。

これをサーバーにアップロードして、CSSのbackgroundプロパティやHTMLの<img>タグのsrc属性で指定して使います。

HTMLでsvgファイルを使う
<img src="xxxx.svg">
CSSでsvgファイルを使う
.xxxxx {
  background: url("xxxx.svg"); 
}

もうひとつのsvg形式の使い方は、CSSファイルではなくJavaScriptファイルを読み込むようにして、<i>タグを使って表示します。

jsファイルは、最初の方でみたCSSのコード取得ページで『Webfont』ではなく『SVG』を選択してjsファイル貼り付けコードを取得します。これをCSSと同じように<head>タグに貼り付けます。

ただこれらの2つの方法はあまりおススメしません。

svgファイルの場合は、

  • ダウンロードして、自分でサーバーにアップするのが面倒。
  • グラデーションなど高度な加工をしない限り使い道がない。
  • jsファイルはAMPで使えない。
  • 時間がかかる。

など、ふつうに使う分にはデメリットしかありません。svgは特別なことをする場合、きちんとした目的がある場合だけに限定したほうが良いです。

ふつうに使う分にはsvgのことは忘れてください。

HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!