スポンサーリンク

「Font Awesome」WEBアイコンを使いこなすべし!

シェアする

ごきげんよう!

まったりサムライじゃ!

皆々、「WEBアイコン(フォント)」は導入しておるか?

写真をあまり使わない記事でも、リストや見出し等のほんのワンポイントにWEBアイコンを使うだけで記事の見た目ががらりと変わる。

WEBアイコンと聞くと、HTMLの知識が必要じゃ…。なんて思っている者も居るだろうが、

知識なんて必要ない!

最低限のことは、“コピペ”だけで導入可能だぞ!

 こんなのや、、、。

 こんなアイコンが実装可能だ!

今回は、「WEBアイコン」の基礎知識と、導入方法

そして、拙者おススメのWEBアイコンを紹介するぞ!

「WEBアイコン」というのは、アイコン(絵)“文字”として表示させることができるものだ。

アイコンはCSSを使って“座標”で描かれている。(なんたる技術!)

よって、拡大・縮小してもアイコンが崩れたり粗くなる事もない。

アイコンはCSSでも装飾可能で、その大きさ・色・位置など変更可能だ。

Font Awesome 5

WEBアイコン提供元はいくつかあるが、提供しているアイコンはどこもほとんど変わらない。

なので今回は、利用者も多く安心できる「Font Awesome」のWEBアイコンをご紹介する。

Font Awesome バージョン5は、2017年末にリリースされたばかりの最新バージョンだ!

そのアイコンの数は、なんと! 2,316個!

一部は有料だが、$60とさほど高くない金額で全てのアイコンをダウンロード可能だ。
(拙者的には無料で十分…)

Font Awesome 5」WEBアイコン導入方法

WEBアイコンの仕組みはWEBフォントと似ている。

WEBアイコンの実装方法は大きく分けて次の2種類だ。

  • WEBフォントのように、フォントデータをダウンロードし自分のサーバーにアップロードして使用する
  • <head>〜</head>内に公式サーバーに保管されているCSSの読み込みコードを書き込む

信頼できないWEBアイコン提供元(ある日突然サーバーを閉じるかも…)なら、自分のサーバーにアップロードする方が安全だが、

Font Awesome」の場合は、簡単に導入できる公式サーバーデータを読み込む方法でいいだろう。

1.公式サーバーからCSSデータを読み込むコードをサイトに書き込む

自サイトのCSSにしろ、他サイトのCSSにしろスタイルをそのページで反映させるには、
<head>〜</head>内に読み込み用のコードを書き込む必要がある。

下記のコードをコピーして、<head>〜</head>内に書き込む。

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

WordPressで<head>〜</head>に書き込む方法

〔header.php〕に書き込む方法もあるが、初心者で〔.php〕をいじるのは危険だ。(拙者も未だに手がプルプルする…)

WordPressの場合<head>領域に追加で書き込めるプラグインを使うのが安全だろう。

「Add Code To Head」プラグインは余計な機能もない、ただヘッダーのみに追記するプラグインだ。

プラグイン新規追加で“Add Code To Head”と入力すれば表示されるはずだ。

はてなブログで<head>〜</head>に書き込む方法

無料ブログは更にシンプルだ。

〔設定〕→〔詳細設定〕→〔headに要素を追加〕

で、<head>領域に記述できる。

Bloggerで<head>〜</head>に書き込む方法

こちらも簡単。

〔テンプレート〕→〔HTMLの編集〕

で 、<head>領域に記述できる。

2、WEBアイコンのコードを書き込む

使用したいWEBアイコンの“コード”を直接“HTML”に書き込む。

ただそれだけだ。

例えば、、、

<p><i class="fas fa-exclamation"></i>注意</p>

と記述すれば、、、

と表示される。

CSSでの装飾の方が望ましいが、半角スペースをロゴと文字の間に入れることで、、、

<p><i class="fas fa-exclamation"></i>&nbsp;注意</p>

このように簡単にスペースを空けることができる!

3、クラスを指定してアイコンを編集

読み込んだ公式のCSSには、初めから用意されているいくつかのスタイルがある。

その〔class 名〕を指定することで、簡単にアイコンの大きさを変えたりできる!

アイコンの大きさを変える

アイコンの大きさを変えるには、アイコンコードに大きさを指定する〔class 名〕を追記してやればいい。

大きさを示すclass名は、

  • fa-lg 〕……少し大きい
  • fa-2x 〕……2倍の大きさ
  • fa-3x 〕……3倍の大きさ
  • fa-4x 〕……4倍の大きさ

となる。

〔class 名〕を追記する場所は〔class=””〕のダブルクォーテーション内で、半角スペースを空けて記述する。

<p><i class="fas fa-exclamation fa-3x"></i>&nbsp;注意</p>

すると、、、。

標準よりも大きく表示することができる。

アイコンを四角で囲う

fa-border 〕のクラス名を追記することで、アイコンの周囲を線で囲むことができる。

<p><i class="fas fa-exclamation fa-border"></i>&nbsp;注意</p>

(背景のせいで少し見にくい…スマヌ)

少し余白を設ける

fa-fw 〕のクラス名を追記することで、アイコンの左右に少し余白が生まれる。

変化はあまり感じられないが、小さなアイコンを使う時に『左に詰まってるなー』と感じたら使ってみてはどうだろう。

4.アイコンの多彩な設定

動きを加える

公式CSSには、アニメーションを設定したCSSまである。

下記コードを<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" />

追加でSCCを読み込ませたら、対象の〔class 名〕を追記してやれば、簡単に動きを加えることができる。

追記方法は先までと同じだ。

〔 faa-bounce animated 〕… 跳ねる …  注意

〔 faa-horizontal animated 〕 … 横に揺れる …  注意

〔 faa-vertical animated 〕 … 縦に揺れる …  注意

〔 faa-shake animated 〕 … シェイク …  注意

マウスオーバー時のみ動かす

先の、〔 class 名 〕の〔 animated 〕部分を〔 animated-hover 〕に変えることで、マウスオーバー時のみアイコンが動くようになる。

<i class="fas fa-exclamation faa-shake fa-3x animated-hover"></i>&nbsp;注意

アイコンにマウスオーバーしてみよ!

 注意

5.見出しや、指定した属性・タグの文章の前に一括でアイコン表示

WEBアイコンを実装したい者の多くは、

『各見出しに、共通のアイコンを設定したい!』

と願っていることだろう。

しかし、コピペとはいえ全ての見出しにアイコンコード(HTML)を書き込んでいくのは少し心が折れる…。

そんな時に便利なのがやはり“CSS”だ!
HTMLに直接書き込まなくても、〔 h1 タグ 〕等の見出しや、〔 id・class 〕等を指定して、
指定した全ての箇所にWEBアイコンを表示させる方法がある。

これは、多少なりともHTML・CSSの知識が必要になるが、知らない者でもすぐにできる!

くじけず読んでほしい。

CSSでのWEBアイコン表示方法

font-family: "Font Awesome 5 Free"; content: "\〇〇〇〇";

というSCCコードでWEBアイコンを呼び出すことができる。
(後術するが〇にはCSS用のコードが入る)

これを、指定したいタグの疑似要素〔 :before 〕〔 :after 〕に記述してやればいいのだ。

つまり、、、。
全ての h2(中見出し)に共通したWEBアイコンを挿入したい場合。

h2:before {
font-family: "Font Awesome 5 Free";
content: "\〇〇〇〇";
padding-right : 6px;/*アイコンを入れるスペースの確保(アイコンのサイズによって臨機応変に変更要)*/
}

※後ろに挿入したい場合は、〔 :before 〕を〔 :after 〕に変更する

と記述する。

〇〇〇〇には、CSS用のコードが入る。
各WEBアイコンの識別コードのようなものだ。
Font Awesome公式ページ』でも確認可能だし、次項の拙者おススメWEBアイコンにも記載している。

※〔 padding-right : 6px; 〕は、アイコンが入るスペースを空けるために記述する。
アイコンと文字間を更に開ける際や、大きなアイコンを使用するときなどは、px数を大きくする。

アイコンの装飾方法

せっかくCSSでアイコンを挿入したのなら、色を変えたり装飾もしよう!

次のCSSに記述蘭のコードを記述する。

 アイコンの装飾(CSS記述方法)
目的 CSSコード 備考
アイコンのサイズを変えたい
font-size: 〇em;
〇には基本の何倍かの数値を記述
 アイコンの色を変えたい
color: #〇〇〇;
 〇には色コードを記述
 アイコンの位置を調整したい
left: 〇px;
right: 〇px;
top: 〇px;
bottom: 〇px;
 〇には移動させるpx数を記述

各種SNSのボタンの色についてはこちらの記事も参考にしてほしい。
サイトカラー・ロゴカラーの選定に!目を引くWEBの配色集じゃ!




おすすめWEBフォント一覧

長らくお待たせした!

WEBフォントの基礎、実装方法が分かったところで実際にどのようなWEBアイコンが使えるのか見ていこう!

“Font Awesome バージョン5”は無料版でも多くのWEBフォントが使える。

そして使用できるフォントは『Font Awesome公式ページ』で確認することができるが、
その数2,300以上…。

少し気が遠くなりそうな位の量だ!
(そして公式サイトが重い…)

そこで!拙者がおススメ(使いそう)するアイコンを集めてみた!
(単に自分用のメモ書きだったりもする…)

かなり使えそうなものばかりだ!
一度見てほしい!

まったりサムライ厳選WEBフォント47選!(半端は勘弁!)いざ!

プルダウン

 ダブルダウン(下)

<i class="fas fa-angle-double-down"></i>

CSS用ユニコード 〔 f103 〕


 ダブルダウン(右)

<i class="fas fa-angle-double-right"></i>

CSS用ユニコード 〔 f101 〕


 ダウンタブ(下)

<i class="fas fa-angle-down"></i>

CSS用ユニコード 〔 f107 〕


 ダウンタブ(右)

<i class="fas fa-angle-right"></i>

CSS用ユニコード 〔 f105 〕


 サークルダウン(下)

<i class="fas fa-chevron-circle-down"></i>

CSS用ユニコード 〔 f13a 〕


 サークルダウン(右)

<i class="fas fa-chevron-circle-right"></i>

CSS用ユニコード 〔 f138 〕


 ダウン

<i class="fas fa-chevron-down"></i>

CSS用ユニコード 〔 f078 〕


 ライト

<i class="fas fa-chevron-right"></i>

CSS用ユニコード 〔 f054 〕


矢印

 塗り矢印(下)

<i class="fas fa-arrow-alt-circle-down"></i>

CSS用ユニコード 〔 f358 〕


 塗り矢印(右)

<i class="fas fa-arrow-alt-circle-right"></i>

CSS用ユニコード 〔 f35a〕


 矢印(下)

<i class="far fa-arrow-alt-circle-down"></i>

CSS用ユニコード 〔 f358 〕


 矢印(右)

<i class="far fa-arrow-alt-circle-right"></i>

CSS用ユニコード 〔 f35a 〕


 小矢印(下)

<i class="fas fa-caret-down"></i>

CSS用ユニコード 〔 f0d7 〕


 小矢印(右)

<i class="fas fa-caret-right"></i>

CSS用ユニコード 〔 f0da 〕


チェックマーク

 チェックマーク

<i class="fas fa-check"></i>

CSS用ユニコード 〔 f00c 〕


 丸チェックマーク(塗り)

<i class="fas fa-check-circle"></i>

CSS用ユニコード 〔 f058 〕


 丸チェックマーク

<i class="far fa-check-circle"></i>

CSS用ユニコード 〔 f058 〕


 四角チェックマーク(塗り)

<i class="fas fa-check-square"></i>

CSS用ユニコード 〔 f14a 〕


 四角チェックマーク

<i class="far fa-check-square"></i>

CSS用ユニコード 〔 f14a 〕


その他アイコン

 吹き出し(塗り)

<i class="fas fa-comment"></i>

CSS用ユニコード 〔 f075 〕


 吹き出し

<i class="far fa-comment"></i>

CSS用ユニコード 〔 f075 〕


 mail(塗り)

<i class="fas fa-envelope"></i>

CSS用ユニコード 〔 f0e0 〕


 mail

<i class="far fa-envelope"></i>

CSS用ユニコード 〔 f0e0 〕


 ビックリマーク

<i class="fas fa-exclamation"></i>

CSS用ユニコード 〔 f12a 〕


 ビックリマーク(注意)

<i class="fas fa-exclamation-triangle"></i>

CSS用ユニコード 〔 f071 〕


 linkマーク

<i class="fas fa-link"></i>

CSS用ユニコード 〔 f0c1 〕


 サーチ

<i class="fas fa-search"></i>

CSS用ユニコード 〔 f002 〕


マウスポインター風

 ポインター

<i class="fas fa-location-arrow"></i>

CSS用ユニコード 〔 f124 〕


 矢印カーソル

<i class="fas fa-mouse-pointer"></i>

CSS用ユニコード 〔 f245 〕


各種SNSロゴ

 Facebook

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

CSS用ユニコード 〔 f09a 〕


 いいね!

<i class="far fa-thumbs-up"></i>

CSS用ユニコード 〔 f164 〕


 Twitter

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

CSS用ユニコード 〔 f099 〕


 Google+

<i class="fab fa-google-plus"></i>

CSS用ユニコード 〔 f2b3 〕


 LINE

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

CSS用ユニコード 〔 f3c0 〕


インターネット

 Chrome

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

CSS用ユニコード 〔 f268 〕


 Google

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

CSS用ユニコード 〔 f1a0 〕


 IE

<i class="fab fa-internet-explorer"></i>

CSS用ユニコード 〔 f26b 〕


 Firefox

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

CSS用ユニコード 〔 f269 〕


 edge

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

CSS用ユニコード 〔 f282 〕


その他・ロゴ

 Amazonのロゴ

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

CSS用ユニコード 〔 f270 〕


 Apple

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

CSS用ユニコード 〔 f179 〕


 Windows

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

CSS用ユニコード 〔 f17a 〕


 ビットコインロゴ

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

CSS用ユニコード 〔 f379 〕


 Playstation

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

CSS用ユニコード 〔 f3df 〕


 任天堂switch

<i class="fab fa-nintendo-switch"></i>

CSS用ユニコード 〔 f418 〕


 Wordpress

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

CSS用ユニコード 〔 f19a 〕


 YouTube

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

CSS用ユニコード 〔 f167 〕





最後に

いかがだっただろうか?

お役に立てたかの?

HTML・CSSの知識が無い者でも、比較的簡単に実装できるWEBアイコンじゃ!

気にいったものがあればどんどん使っていこう!
あまり使いすぎるとサイトが少し重くなるが…。

P.S.
Font Awesome公式サイトが重い理由もあり、1記事でほぼ丸一日費やしたぞ…。

拙者の魂がこもったこの記事を!是非とも!シェア!してほしい!

※因みに上のシェアボタンのCSSは、

〇〇〇:before {
font-family: "Font Awesome 5 Brands";/*Font Awesome 5を使うことの宣言*/
content: "\f099";/*アイコンの種類*/
padding-right : 6px;/*アイコンを入れるスペースの確保(アイコンのサイズによって臨機応変に変更要)*/
color: #55ACEF;/*アイコンカラー*/
font-size: 2em;/*アイコンの大きさ*/
}

である!

〇〇〇には任意の〔タグ名〕・〔id名〕・〔class名〕が入るぞ!

では!さらばじゃ!

スポンサーリンク

シェアする

フォローする

最後まで読んで頂き恐悦至極!
この書物が役立ったらば、是非!
いいね・シェア!して頂きとうござる!