小さな会社のためのECサイトプロデュース|ブレイントラスト
  • Yahoo!コマースパートナーBest Store Awards 2020特別賞
  • Yahoo!コマースパートナー認定

スマホページの軽量化のため、画像をなるべく使わずにページを作りたいので調べていると、アイコンフォントというものがあると知りました。使い方をお教えいただけますか?

アイコンフォントには、「FontAwesome5」や「Material icons」などがあり、head内に下記のcssタグを張り付け、それぞれに対応のコードを記載することで使用できるようになります。

◆FontAwesome5(バージョンは最新でない場合があります)
・css
<link href=”https://use.fontawesome.com/releases/v5.7.0/css/all.css” rel=”stylesheet”>
・コード
<i class=”fas fa-○○”></i>など

◆Material icons
・css
<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>
・コード
<i class=”material-icons”>△△△</i>など

色やサイズを変更するときは、通常のフォントのようにcssで設定できますが、それぞれに推奨のサイズ、カラーなどがあるので、詳しくはそれぞれのサイトを見てみるといいでしょう。
使えるアイコンもまとめられているので、利用の際にはそちらにも目を通すようにしましょう。

◆FontAwesome5
https://origin.fontawesome.com/

◆Material icons
https://material.io/tools/icons/?style=baseline