天気アイコンをwebフォントとして使える「Weather Icons」

お天気アイコンを画像ではなくwebフォントとして使える「Weather Icons」では、123個以上の晴れ・曇り・雨・雪マークなどに加えて、風向きや風速などのお天気アイコンが全て無料で使えます。

さらに満月や半月などの月アイコンも揃っていて、天候に関するアイコンを使いたい時はかなり便利です。 しかも各お天気アイコンの使い方は、「Font Awesome」とほぼ同じなので、結構簡単!

ということで、このページでは無料webサービス「Weather Icons」のお天気アイコンをwebフォントとして使う方法を紹介します。

Weather Iconsの使い方

Weather Iconsを利用するには、次のような手順が必要となります。

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

Weather Iconsファイルのダウンロード

Weather Iconsのダウンロードボタンの場所

まずは「Weather Icons」にアクセスし、ファイルをダウンロードします。 「Download Now」ボタンを押してください。

「weather-icons-master.zip」というファイルがダウンロードされるので、解凍します。

※よくわからない場合はダウンロードしたファイルを右クリックし「すべて展開」を選択するか、またはダウンロードしたファイルをダブルクリックし中に1つだけフォルダが入っているので、それを切り取りデスクトップなどに貼り付けて下さい。

Weather Iconsファイルの設置

weather-icons-masterの内容

解凍すると上記のような「weather-icons-master」というフォルダができます。 このフォルダをffftpなどを使用し、サーバーへアップロードします。

※よくわからない場合はHTMLファイルと同じ場所に「weather-icons-master」をアップして下さい。

本来全部は必要ないんですけど、「weather-icons-master」フォルダごとアップしちゃった方が楽なので、今回はその方法で説明していきます。 ワードプレスで使用したい場合はテーマフォルダ内、もしくは子テーマフォルダ内にアップロードします。

Weather Iconsファイルの呼び出し

「weather-icons-master」フォルダ内のcssファイルを呼び出します。 HTMLファイルの<head>~</head>内に下記を記述します。

※下記はHTMLファイルと同じ場所に「weather-icons-master」を設置した場合

<link rel="stylesheet" type="text/css" href="weather-icons-master/css/weather-icons.min.css">

ワードプレスの場合

ワードプレスで使用したい場合は、header.phpの<head>~</head>内に下記を記述します。

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/weather-icons-master/css/weather-icons.min.css">
子テーマの場合

ワードプレスの子テーマ内で呼び出す場合は、下記のように記述します。

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/weather-icons-master/css/weather-icons.min.css">

アイコンを表示したい場所にHTMLを記述

あとは表示したい場所にHTMLを記述すれば、天気アイコンがwebフォントとして表示されるようになります。 例えば下記のように、各天気アイコンに割り振られているクラス名を、アイコンを表示したいHTMLタグのclass属性の値に記述すれば、天気アイコンが表示されます。

<i class="wi wi-rain"></i>
<i class="wi wi-day-sunny"></i>
<i class="wi wi-day-cloudy"></i>
雨・晴れ・曇りのお天気アイコンが表示されている様子

まずはWeather Iconsにアクセスし、利用したい天気マークのクラス名を探します。

晴れのお天気アイコンのクラス名の場所

晴れのお天気アイコンであれば「wi-day-sunny」の部分が割り振られているクラス名となります。 そのクラス名と併せて「wi」というクラス名をHTMLタグのclass属性の値に記述して下さい。 例えば下記のようになります。

<i class="wi wi-day-sunny"></i>

こんな感じで「wi」と使いたい天気アイコンのクラス名を記述します。 そうすると天気アイコンがwebフォントとして表示されるようになります。

疑似要素を使って天気アイコンを表示する方法

HTMLをいじらなくても、cssの「:before」「:after」疑似要素を使って、天気アイコンを表示する事もできます。 まずはWeather Iconsにアクセスし、使いたい天気アイコンのUnicodeを探します。

Unicodeの記載場所

Unicodeは、クラス名の下に小さく青色の文字で記載されてます。 晴れマークの場合なら「f00d」がUnicodeとなります。

これを下記のように記述します。

span:before{
  content:"\f002";
  font-family: 'weathericons';
}
<span></span>

<!-- iでもspanでも、なんでも大丈夫です -->

上記の場合span要素の前に天気アイコンがwebフォントとして表示されます。

簡単な説明なんですが、contentプロパティに先ほど探した、使用したい天気アイコンのUnicodeを入力します。 この時Unicodeの前にバックスラッシュ「\(入力すると¥マークとなります)」をつけ「\f002」というように記述します。

そしてfont-familyを「'weathericons'」と指定するだけで、天気アイコンがwebフォントとして表示されるようになります。

天気アイコンのスタイル

天気アイコンは画像ではなく、webフォントとして表示されるのでCSSでテキストのスタイルを設定する時と同じように指定することができます。 簡単にスタイルを指定してみたので、サンプルを載せていきますね。

<i class="wi wi-rain"></i>
<i class="wi wi-day-sunny"></i>
<i class="wi wi-day-cloudy"></i>
<i class="wi wi-stars"></i>
<i class="wi wi-cloud"></i>
<i class="wi wi-na"></i>
<i class="wi wi-umbrella"></i>
<i class="wi wi-lightning"></i>
<i class="wi wi-tsunami"></i>
<i class="wi wi-wind-direction"></i>
<i class="wi wi-snowflake-cold"></i>
.wi{
  font-size: 40px;
  color: #924da3;
  margin-right: 15px;
}
お天気アイコンのスタイルを変えたサンプル1
.wi{
  font-size: 40px;
  color: #fff;
  margin-right: 15px;
  padding: 5px;
  background: #924da3;
  border-radius: 5px;
}
お天気アイコンのスタイルを変えたサンプル2
.wi{
  font-size: 40px;
  color: #924da3;
  margin-right: 15px;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
お天気アイコンのスタイルを変えたサンプル3

用意されているスタイル

Weather Iconsには、予め用意されているスタイルのクラス名があります。 それを天気マークのwebフォントのclass属性の値に追加する事で、天気マークを傾けたり、反転したり、固定幅にしたりすることができます。

Flip(反転する)

天気マークを反転します。 クラス名に「wi-flip-horizontal」を追加して下さい。

反転して表示した天気マークのサンプル
<i class="wi wi-rain"></i> デフォルト
<i class="wi wi-rain wi-flip-horizontal"></i> wi-flip-horizontal
<i class="wi wi-day-sunny wi-flip-horizontal"></i> wi-flip-horizontal
<i class="wi wi-day-cloudy wi-flip-horizontal"></i> wi-flip-horizontal

Rotate(傾ける)

天気マークを傾けます。 「wi-rotate-90(90度)」「wi-rotate-180(180度)」「wi-rotate-270(270度)」をクラス名に追加します。

角度を傾けた天気マークのサンプル
<i class="wi wi-rain"></i> デフォルト
<i class="wi wi-rain wi-rotate-90"></i> wi-rotate-90
<i class="wi wi-rain wi-rotate-180"></i> wi-rotate-180
<i class="wi wi-rain wi-rotate-270"></i> wi-rotate-270

Fixed Width(固定幅)

天気マークを固定幅にします。 クラス名「wi-fw」が指定された天気マークは、幅(width)が1.4emとなり、センタリングされます。

※表示サンプルでは、分かりやすくするために背景を赤色にしています。

固定幅にした天気マークサンプル
<i class="wi wi-rain"></i> デフォルト<br />
<i class="wi wi-rain wi-fw"></i> wi-fw<br />
<i class="wi wi-rain wi-fw"></i> wi-fw<br />
<i class="wi wi-rain wi-fw"></i> wi-fw<br />

まとめ

こんな感じで豊富な種類の天候に関するアイコンをwebフォントとして使う事ができます。 ただ「Wind Degree Examples」以下の風向きに関するアイコンは、設定方法や読み込むCSSファイルがこのページで紹介した方法とは少し違うので、また今度紹介しますね。

とりあえず全部無料で使えるので、ぜひ使って見て下さいね。 それとWeather Iconsの天気マークのライセンスは「CC BY 3.0」となっています。