
マイクロソフトが開発したWindows10では、これまでのWindows7やXPとは違うアイコンが使用されています。
この新しいスタイルとなったWindows10のアイコンは、「Micon」というサイトで配布されており、WEBサイトやあらゆるデザインで使用することができます。 例えばWEBサイトで使う場合であれば、アイコンフォントとして使用してCSSでデザインを自由に変更したりすることもでき、商業利用する場合も完全無料で利用できます。
そこでこのページではMiconで配布されているWindows10スタイルのアイコンフォントの導入方法や設定方法などを紹介します。 なお使用できるWindows10のアイコンは次のようなものとなっていますが、使用できる全アイコンはこちらで確認できます
Miconの導入方法
Miconをアイコンフォントとして利用する場合の主な手順は下記のようになります。
- MiconのファイルをGithubからダウンロード
- Miconのファイルを設置
- Miconのファイルの呼び出し
- アイコンを表示したい場所にHTMLなどを記述
WEBサイトにMiconを導入する手順は下記で詳しく解説しますが、Micon – Get Startedにも記載されています。
-
Miconのファイルをダウンロードする
まずはGithubにアクセスし、「micon_without_webbrand.zip」などをクリックします。
するとダウンロードが開始されるので、完了したらダウンロードしたzipファイルを右クリックし「すべて展開」を選択します。
-
ファイルを設置する
-
ファイルを呼び出す
<link rel="stylesheet" href="micon_nb/css/micon_nb.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/micon_nb/css/micon_nb.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/micon_nb/css/micon_nb.min.css"> //上記は子テーマ内で呼び出す場合
-
アイコンを表示したい場所にコードを記述
アイコンを表示したい場所(HTMLファイル内)に下記のようなHTMLコードを記述すると対応したアイコンが表示されます。
なお表示するアイコンの各コードはMicon-Iconsのページから使用したいアイコンをクリックするとそのアイコンのコードが確認できます。
疑似要素を利用した表示方法
アイコンを表示する場合、<i class=”mi mi-Battery9″></i>というようなコードをHTMLファイルに記述する事でアイコンがその場所に表示されますが、これらのコードを記述せずcssのbefore疑似要素、after擬似要素だけでアイコンを表示する事もできます。
その場合は疑似要素のfont-familyを「micon_nb」に指定し、contentにアイコンのUnicodeを記述する事でそのアイコンが表示されます。 アイコンのUnicodeはダウンロードした「micon-nb」フォルダ内のデモ(html-demo-micon_nb.html)を開くと記載されています。

なお実際に疑似要素を使用する場合の例は次のようになりますが、contentに記述するUnicodeの前には「\」を付ける必要があります。 (下記では文字化けしてバックスラッシュとなっています)
<span class="sample"></span>
.sample:before{ font-family:micon_nb; content:"\EA03"; }
アイコンの設定
アイコンの設定はCSSから自由に行えますが、micon導入時に含まれているCSSファイルにも事前に設定されています。 例えば用意されているclass名を追加する事でアイコンのサイズ変更、回転、アニメーション、スタックなどが行えます。
詳しくはMicon – Examplesに記載されているのでご覧ください。 なおここでは一部のみ解説します。
-
サイズ変更
<i class = "mi mi-Settings mi-lg"> </ i> <i class = "mi mi-Settings mi-2x"> </ i> <i class = "mi mi-Settings mi-3x"> </ i> <i class = "mi mi-Settings mi-4x"> </ i> <i class = "mi mi-Settings mi-5x"> </ i>
-
固定幅にする
<i class = "mi mi-Settings mi-fw"> </ i>
-
リスト表示する
<ul class = "mi-ul"> <li> <i class = "mi-li mi mi-Settings"> </ i>リスト1</ li> <li> <i class = "mi-li mi mi-Send"> </ i>リスト2</ li> <li> <i class = "mi-li mi mi-mi-spin"> </ i>リスト3</ li> <li> <i class = "mi-li mi mi-MyNetwork"> </ i>リスト4</ li> </ ul>
-
アニメーションを追加
アイコンを回転させたい場合はmi-spin、8ステップで回転させたい場合はmi-pulseなどをclassに追加します。
なおIE8 – IE9などのブラウザではCSS3のアニメーションがサポートされていないため動作しませんので注意して下さい。
<i class = "mi mi-Settings mi-spin"> </ i> <i class = "mi mi -Globe mi-pulse"> </ i> <i class = "mi mi-Refresh mi-spin"> </ i>
-
回転・反転させる
<i class = "mi mi-SDCard"> </ i> <i class = "mi mi-SDCard mi-rotate-90"> </ i>90度回転 <i class = "mi mi-SDCard mi-rotate-180"> </ i>180度回転 <i class = "mi mi-SDCard mi-rotate-270"> </ i>270度回転 <i class = "mi mi-SDCard mi-flip-horizontal"> </ i>左右反転 <i class = "mi mi-SDCard mi-flip-vertical"> </ i>上下反転
-
スタックする
<span class = "mi-stack mi-lg"> <i class = "mi mi-BodyCam mi-stack-1x"> </ i> <i class = "mi mi-BlockedLegacy mi-stack-2x text-danger"> </ i> </ span> <span class = "mi-stack mi-lg"> <i class = "mi mi-HeartFill mi-stack-1x text-danger"> </ i> <i class = "mi mi-Heart-1x"> </ i> </ span>