シンプルな月マークをアイコンフォントで使える「Weather Icons」

無料webサービス「Weather Icons」では、満月・半月・三日月などのシンプルな月マークがアイコンフォントとして使えます。

月のシルエットアイコン以外にも天気に関するアイコンなどもあり、200種類以上ものアイコンが全て無料で利用できます。 このページでは「Weather Icons」の月マークを使ったアイコンフォントの導入方法、CSSでのスタイルの適用方法などを紹介していきます。

ちなみに月マークのアイコンは下記のような種類があります。

「Weather Icons」の月マークアイコンのサンプル 「Weather Icons」の月マークアイコンのサンプル2

Weather Iconsの使い方

Weather Iconsは下記の手順で利用することができます。

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

詳しくは「天気アイコンをwebフォントとして使える「Weather Icons」」で紹介していますので、そちらをご覧ください。

ちなみにHTMLタグを使って月マークのアイコンフォントを表示する方法、CSSの疑似要素を使って表示する方法の2パターンがあります。 どちらの方法もすごい簡単なので、是非利用してみて下さい。

アイコンフォントのスタイル

「Weather Icons」で利用できる月マークのアイコンは、画像ではなくアイコンフォントとして利用できるので、CSSでサイズや色を変える事ができます。 アイコンフォントは通常のテキストと同じようにスタイルを適用できるので、とても簡単にデザインを変更できます。

例えば下記のようにHTMLで月マークのアイコンフォントを表示したとします。

<i class="wi wi-night-clear"></i>
<i class="wi wi-night-alt-rain"></i>
<i class="wi wi-moon-new"></i>
<i class="wi wi-moon-alt-waxing-crescent-3"></i>
月マークのアイコンフォントを表示したサンプル

このアイコンの色を変えたい場合はCSSに下記のように記述します。 (ついでにアイコンのサイズも変更してます)

.wi{
  font-size:30px;
  color:#FFD700;
}
黄色にした月マークのアイコンフォント

こんな感じでhタグやpタグのようにスタイルを指定することができます。 ちなみにアイコンフォントはテキストなので、サイズを変えても画像のようにぶれる事はありません。 どんなにサイズを大きくしても綺麗に表示できます。

簡単にですが、CSSでアイコンフォントのスタイルを変更したサンプルを紹介していきますね。

サンプル1

.wi{
  font-size:50px;
  color:#FFD700;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
スタイルを適用した月マークのアイコンフォントのサンプル

サンプル2

.wi{
  font-size:50px;
  color:#fff;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #FFD700;
  width:50px;
  text-align:center;
}
スタイルを適用した月マークのアイコンフォントのサンプル2

サンプル3

.wi{
  font-size:50px;
  color:#fff;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  width:50px;
  text-align:center;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #fff3c7), color-stop(0.00, #FFD700));
  background: -webkit-linear-gradient(top, #FFD700 0%, #fff3c7 88%);
  background: -moz-linear-gradient(top, #FFD700 0%, #fff3c7 88%);
  background: -o-linear-gradient(top, #FFD700 0%, #fff3c7 88%);
  background: -ms-linear-gradient(top, #FFD700 0%, #fff3c7 88%);
  background: linear-gradient(to bottom, #FFD700 0%, #fff3c7 88%);
}
スタイルを適用した月マークのアイコンフォントのサンプル3

サンプル4

.wi{
  font-size:50px;
  color:#FFD700;
  border:solid 5px #FFD700;
  border-radius: 10px;
  width:50px;
  text-align:center;
}
スタイルを適用した月マークのアイコンフォントのサンプル4

サンプル5

.wi{
  font-size:50px;
  color:#FFD700;
  border-radius: 10px;
  width:50px;
  text-align:center;
  background: #333;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
スタイルを適用した月マークのアイコンフォントのサンプル5

まとめ

こんな感じで月マークはアイコンフォントなので、CSSでデザインを色々変える事ができます。 今回作ったサンプルはイメージがわかなかったんで、簡単なものばかりですけどw

そもそも月のマークって何に使うんですかね?? 月のマークはあんまり使う機会がなさそうですけど、「Weather Icons」は豊富な種類のアイコンが揃っているので是非使って見て下さいね(^^♪