Material Iconsをwebサイト経由せず、ローカルで使えるようにする
最近、Googleが提唱しているMaterial Designが気になりはじめた。 Material Icons Guide - Google Design このサイトで紹介されている方法では、 をhtmlファイルに貼り付ければ、使用できるとあるが、外部接続して欲しくない場合もある。 下のURLにアクセスし、最新版をダウンロードする。 Releases · google/material-design-icons · GitHub 60MBの容量があるが怯まず、zipを解凍する。 中身に色々あるが、実は使うのは、iconfontのフォルダのみ!!!! そのフォルダの中にあるcssを参照すれば使える。 実際に簡単なindex.htmlを用意してみた。 こんな感じで表示できれば成功!!!! アイコンの使い方は、
のサイトを開き、下にスクロール、またはsearchに文字を入力すると、アイコンの一覧が表示されるので、好きなアイコンを選択して、画面下の「ICON FONT」をクリックすると、htmlに貼るソースが表示される。 こんな感じ。
あとはお好きなように貼り付ければOK 商用利用も可能で、web制作時、アイコンに困ったら、選択肢の一つになると思う。
無料というのも強い。
好みはあるが、私はdesignも好きなので今後も積極的に使っていくと思う。 material iconを使っていくと、Google謹製のCSSフレームワーク material design lite(MDL)も気になってきた。はじめに
その中でデザインにあったmaterial iconがあるのでそれを使う方法を紹介する。公式サイト
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
その場合の手順を紹介する。準備
記事を書いている時は、v3.0.1。
そのフォルダを使用したいhtmlファイルのフォルダに格納して使う。
ソースコードは、index.htmlファイルと同じ階層にiconfontが入っている前提。<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/material-icons.css">
</head>
<body>
<i class="material-icons">search</i>
<i class="material-icons">android</i>
<i class="material-icons">mail</i>
<i class="material-icons">reply</i></body>
</html>
最後に
その他
今後MDLにも触れていこうと思う。