無料でWindows10のアイコンフォントを使う方法

アイコン

マイクロソフトが開発したWindows10では、これまでのWindows7やXPとは違うアイコンが使用されています。

この新しいスタイルとなったWindows10のアイコンは、「Micon」というサイトで配布されており、WEBサイトやあらゆるデザインで使用することができます。 例えばWEBサイトで使う場合であれば、アイコンフォントとして使用してCSSでデザインを自由に変更したりすることもでき、商業利用する場合も完全無料で利用できます。

そこでこのページではMiconで配布されているWindows10スタイルのアイコンフォントの導入方法や設定方法などを紹介します。 なお使用できるWindows10のアイコンは次のようなものとなっていますが、使用できる全アイコンはこちらで確認できます

アイコンサンプル
アイコンサンプル

Miconの導入方法

Miconをアイコンフォントとして利用する場合の主な手順は下記のようになります。

  1. MiconのファイルをGithubからダウンロード
  2. Miconのファイルを設置
  3. Miconのファイルの呼び出し
  4. アイコンを表示したい場所にHTMLなどを記述

WEBサイトにMiconを導入する手順は下記で詳しく解説しますが、Micon – Get Startedにも記載されています。

  1. Miconのファイルをダウンロードする

    Github

    まずはGithubにアクセスし、「micon_without_webbrand.zip」などをクリックします。

    するとダウンロードが開始されるので、完了したらダウンロードしたzipファイルを右クリックし「すべて展開」を選択します。

  2. ファイルを設置する

    「micon_nb」

    展開したファイルをダブルクリックします。

    すると「micon_nb」というフォルダがあるので、それをffftpソフトなどを使用しアイコンを利用したいwebサイトのサーバーへアップロードします。

    アップロードする場所がわからない場合は、アイコンを使用する予定のHTMLファイルと同じ場所にアップして下さい。

    ※ワードプレスの場合はテーマフォルダ内、もしくは子テーマフォルダ内にアップロードして下さい。

  3. ファイルを呼び出す

    記述例

    アイコンを使用する予定のHTMLファイルの<head>~</head>内に下記のコードを記述します。

    ワードプレスの場合はheader.phpの<head>~</head>内に記述して下さい。

    コードを見る

    <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">

//上記は子テーマ内で呼び出す場合

  4. アイコンを表示したい場所にコードを記述

    コードの確認画面

    アイコンを表示したい場所(HTMLファイル内)に下記のようなHTMLコードを記述すると対応したアイコンが表示されます。

    なお表示するアイコンの各コードはMicon-Iconsのページから使用したいアイコンをクリックするとそのアイコンのコードが確認できます。

    CSSコードを見る

    <i class="mi mi-Battery0"></i>
<i class="mi mi-Battery1"></i>
<i class="mi mi-Battery9"></i>
    表示例

    ※<i class=”mi mi-Battery9“></i>というコードの場合、class名「mi-Battery9」 の部分を各アイコンのclass名に変更する事で表示するアイコンが変わります。

    ※後ほど解説していますが、HTMLコードではなくCSSの疑似要素でもアイコンを 表示することができます。

疑似要素を利用した表示方法

アイコンを表示する場合、<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に記載されているのでご覧ください。 なおここでは一部のみ解説します。

  • サイズ変更

    サンプル

    classにmi-lg、mi-2x、mi-3x、mi-4x、またはmi-5xを追加する事で相対的にサイズが変更されます。

    例えば「mi-lg」を追加した場合は33%サイズが大きくなります。

    コードを見る

    <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>

  • 固定幅にする

    サンプル

    classにmi-fwを追加するとアイコンが固定幅になります。

    コードを見る

    <i class = "mi mi-Settings mi-fw"> </ i>

  • リスト表示する

    サンプル

    アイコンをulタグなどのリストで使いたい場合はulタグにmi-ul、liタグ内のアイコンのclassにmi-liを追加する事で最適化されます。

    コードを見る

    <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>

  • 回転・反転させる

    サンプル

    アイコンを回転させたい場合はmi-rotate-90などをclassに追加します。

    反転させたい場合はmi-flip-horizo​​ntal、mi-flip-verticalなどを追加して下さい。

    コードを見る

    <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-horizo​​ntal"> </ i>左右反転
<i class = "mi mi-SDCard mi-flip-vertical"> </ i>上下反転

  • スタックする

    サンプル

    複数のアイコンをスタックさせたい場合は親となる要素のclassにmi-stackを記述します。 そして各アイコンにmi-stack-1xなどのclassを追加する事で大きさを制御できます。

    コードを見る

    <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>

yuki

トップページへ戻る