Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

多くのウェブサイトでアイコンとして,アイコンフォントが導入されている.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

ありがとうございました

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした