Pickupニュース

Material icons
Webフォント

Material icons

Googleの提供するアイコンWebフォント
Google Fontsで公開されているアイコンWebフォントで、現在932個提供されています。
このページでは、Material iconsをWebサイトで使用するための導入から基本的な使い方を紹介しています。
1 Material iconsの導入

スタイルシートのリンク

Material iconsはGoogle フォントで配信されていますので、リンクを貼るだけでアイコンWebフォントを利用することが出来ます。

HTMLマークアップ

<head>タグ内にGoogle フォントで配信されているスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

基本的な使い方

Material iconsの記述方法

アイコンを表示したい箇所に以下のような記述を追加します。
Material iconsのアイコン
<i class=”material-icons”>{アイコン名}</i>

デモ

See the Pen Material icons by JaSTIN (@JaSTIN) on CodePen.light

1 2

コメントを残す

記事ランキング