ごきげんよう！
まったりサムライじゃ！
皆々、「WEBアイコン（フォント）」は導入しておるか？
写真をあまり使わない記事でも、リストや見出し等のほんのワンポイントにWEBアイコンを使うだけで記事の見た目ががらりと変わる。
WEBアイコンと聞くと、HTMLの知識が必要じゃ…。なんて思っている者も居るだろうが、
知識なんて必要ない！
最低限のことは、“コピペ”だけで導入可能だぞ！
こんなのや、、、。
こんなアイコンが実装可能だ！
今回は、「WEBアイコン」の基礎知識と、導入方法。
そして、拙者おススメのWEBアイコンを紹介するぞ！
目次
「WEBアイコン」とは？
「WEBアイコン」というのは、アイコン（絵）を“文字”として表示させることができるものだ。
アイコンはCSSを使って“座標”で描かれている。（なんたる技術！）
よって、拡大・縮小してもアイコンが崩れたり粗くなる事もない。
アイコンはCSSでも装飾可能で、その大きさ・色・位置など変更可能だ。
「Font Awesome ５」
WEBアイコン提供元はいくつかあるが、提供しているアイコンはどこもほとんど変わらない。
なので今回は、利用者も多く安心できる「Font Awesome」のWEBアイコンをご紹介する。
Font Awesome バージョン５は、2017年末にリリースされたばかりの最新バージョンだ！
そのアイコンの数は、なんと！ 2,316個！
一部は有料だが、$60とさほど高くない金額で全てのアイコンをダウンロード可能だ。
（拙者的には無料で十分…）
「Font Awesome ５」WEBアイコン導入方法
WEBアイコンの仕組みはWEBフォントと似ている。
WEBアイコンの実装方法は大きく分けて次の２種類だ。
- WEBフォントのように、フォントデータをダウンロードし自分のサーバーにアップロードして使用する
- <head>〜</head>内に公式サーバーに保管されているCSSの読み込みコードを書き込む
信頼できないWEBアイコン提供元（ある日突然サーバーを閉じるかも…）なら、自分のサーバーにアップロードする方が安全だが、
「Font Awesome」の場合は、簡単に導入できる公式サーバーデータを読み込む方法でいいだろう。
１．公式サーバーからCSSデータを読み込むコードをサイトに書き込む
自サイトのCSSにしろ、他サイトのCSSにしろスタイルをそのページで反映させるには、
<head>〜</head>内に読み込み用のコードを書き込む必要がある。
下記のコードをコピーして、<head>〜</head>内に書き込む。
※バージョン5.1.0
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
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>領域に記述できる。
２、WEBアイコンのコードを書き込む
使用したいWEBアイコンの“コード”を直接“HTML”に書き込む。
ただそれだけだ。
例えば、、、
<p><i class="fas fa-exclamation"></i>注意</p>
と記述すれば、、、
と表示される。
CSSでの装飾の方が望ましいが、半角スペースをロゴと文字の間に入れることで、、、
<p><i class="fas fa-exclamation"></i> 注意</p>
このように簡単にスペースを空けることができる！
３、クラスを指定してアイコンを編集
読み込んだ公式の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> 注意</p>
すると、、、。
標準よりも大きく表示することができる。
アイコンを四角で囲う
〔 fa-border 〕のクラス名を追記することで、アイコンの周囲を線で囲むことができる。
<p><i class="fas fa-exclamation fa-border"></i> 注意</p>
（背景のせいで少し見にくい…ｽﾏﾇ）
〔 fa-fw 〕のクラス名を追記することで、アイコンの左右に少し余白が生まれる。
変化はあまり感じられないが、小さなアイコンを使う時に『左に詰まってるなー』と感じたら使ってみてはどうだろう。
４．アイコンの多彩な設定
動きを加える
公式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> 注意
アイコンにマウスオーバーしてみよ！
注意
５．見出しや、指定した属性・タグの文章の前に一括でアイコン表示
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数を記述
|
※ブランドのロゴを使用する場合は注意！
Twitter・Windows・Amazon等のロゴも用意されているが、ブランドのロゴを利用する際は、
〔 font-family: “Font Awesome 5 Free”; 〕の〔 Free 〕を〔 Brands 〕に変更すること！
各種SNSのボタンの色についてはこちらの記事も参考にしてほしい。
サイトカラー・ロゴカラーの選定に！目を引くWEBの配色集じゃ！
おすすめWEBフォント一覧
長らくお待たせした！
WEBフォントの基礎、実装方法が分かったところで実際にどのようなWEBアイコンが使えるのか見ていこう！
“Font Awesome バージョン５”は無料版でも多くの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 〕
<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ロゴ
<i class="fab fa-facebook"></i>
CSS用ユニコード 〔 f09a 〕
いいね！
<i class="far fa-thumbs-up"></i>
CSS用ユニコード 〔 f164 〕
<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 〕
<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名〕が入るぞ！
では！さらばじゃ！
