多くのウェブサイトでアイコンとして，アイコンフォントが導入されている．Webページのみならずスマホのアプリケーションなどでもアイコンフォントが利用されている．

htmlでアイコンを表示する方法としては，アイコン画像をimgタグを用いて記述することもできるが，アイコンフォントを用いると何が嬉しいのだろうか
FontAwesomeを例にアイコンフォントのメリットとデメリットを挙げていく

メリット

読み込みが速い

一般にブラウザ上でのアイコンフォントの読み込みは，imgタグによるアイコンの読み込みに比べると速いとされている

色や大きさを簡単に変えられる

文字と同じようにcssを当てることができるので文字の大きさや色を変えるようにアイコンフォントもいじれる

html

<i class="fa fa-android fa-4x fa-green"></i>

fa-nxのnを変更することでhtmlのみで大きさを変更することができる

CSS

.fa-green:before
{
    color: #A4C639 ;
}

このようにして色やフォントサイズも自由に設定できる

拡大しても綺麗に表示される

よくある画像ファイルはラスター画像であり，ピクセルによって表示されている．拡大したら輪郭がギザギザになる．
アイコンフォントによって表示される画像はベクター画像であり，拡大しても表示はギザギザにならない．

デメリット

特殊なフォントを使用しているときに表示されない可能性

ブラウザのデフォルトのフォントなどを変更している場合は豆腐になってしまう可能性がある
IEでは次のことをすれば簡単に確認できる
インターネットオプションの「全般」タブを開き、「デザイン」セクションの「フォント」で任意のフォントを選択する。そのうえで、同「デザイン」セクションの「ユーザー補助」で「Web ページで指定されたフォントスタイルを使用しない」を選択する。（らしい）

サイトの読み上げ機能で意図しない動作する可能性

要素に
aria-hidden="true"
を指定することによって解決できる

おまけに

FontAwesomeだとこういう書き方もできる

まずFontAwesome専用のクラスを作り

css

.fb:before
{
    font-family: 'FontAwesome' ;
    padding-right: 5px ;
}

各アイコンごとにクラスを作る

css

.fb-sellsy:before
{
    content: '\f213' ;
    color: #0174C8 ;
}

このconntennt:にはアイコンのユニコードを指定する

html

<span class="fb fb-sellsy">sellsy</span>というウェブサイトがかっこいいですね。

とかくとspanタグで囲んだ部分の前に対象のアイコンを置ける
基本的な書き方よりもhtmlを綺麗に書ける（といっているひとがいた）

参考にしたサイト

http://web-bu.hatenablog.com/entry/2016/10/11/002816
https://syncer.jp/how-to-use-fontawesome
https://saruwakakun.com/html-css/basic/font-awesome

ありがとうございました

アイコンフォントを使うと何が嬉しいのか