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