ちょっとした画像を使いたい時、私はGoogleマテリアルアイコンかBootstrap Iconを使用します。いつもはCDN（Content Delivery Network）といわれるコンテンツ配信ネットワークを使っています。サーバーからライブラリやフレームワーク、フォント、CSSスタイルシートなどの静的リソースを配信することができます。GoogleマテリアルアイコンではHTMLに記述して読み込むことは何度かしているのですが、チェックボックスの四角の中に疑似要素でチェックマークを入れたい時などがあり、前からどうすればいいのかと思ってました。下記の方法で、実現できます。
①いつもと同じように下記をHTMLメインのCSSよりも前に記述して読み込めるようにします
<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>
②CSS
.element::before {
font-family: ‘Material Icons’;
content: ‘\e876‘; /* 例としてチェックアイコンのUnicodeを指定 */
}
青地のfont-family: ‘Material Icons’;は決まった表現です。赤字の\e876は選択したアイコンのUnicodeを入れます。
上記にて簡単に疑似要素にGoogleマテリアルアイコンを入れることができました。
