無料で使える風マークのアイコンフォント「Weather Icons」

風速、風向き、強い風などの風マーク関連のアイコンが無料で使える「Weather Icons」の紹介です。

「Weather Icons」で利用できる風マークは画像ではなく、アイコンフォントとして使えるのでとっても手軽に使用できます。 しかも画像ではなくアイコンフォントなので、CSSでサイズ・色の変更ができる他、画像のようにサイズを大きくしてもぶれる事がありません。

それではさっそく使い方を紹介していきますね。

Weather Iconsの使い方

Weather Iconsを利用する手順は下記のようになります。

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

以前「Weather Icons」の使い方を紹介しましたが、このページでは「Wind Degree Examples」以下の風マークをアイコンフォントとして使う方法となります。 「Wind Degree Examples」より上のお天気アイコンを使用したい場合は「天気アイコンをwebフォントとして使える「Weather Icons」」をご覧ください。

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

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

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

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

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

Weather Iconsファイルの設置

weather-icons-masterの内容と利用するcssファイル

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

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

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

このページでは「weather-icons-master」フォルダごとアップする方法で紹介していきますが、実際使用するファイルはCSSフォルダ内の「weather-icons-wind.min」「font」フォルダだけだったような気がします。

Weather Iconsファイルの呼び出し

CSSフォルダ内にある「weather-icons-wind.min」を呼び出します。 HTMLファイルの<head>~</head>内に下記を記述して下さい。

<link rel="stylesheet" type="text/css" href="weather-icons-master/css/weather-icons-wind.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-wind.min.css">

子テーマの場合

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

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

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

あとは風マークのアイコンを表示したい場所に下記のように記述すると、風マークのアイコンフォントが表示されます。

<i class="wi wi-wind towards-23-deg"></i>
<i class="wi wi-wind towards-313-deg"></i>
<i class="wi wi-wind wi-from-nnw"></i>
風のマークのアイコンを表示したサンプル

アイコンフォントを表示するためには、風マークを表示したい箇所のHTMLに2つのクラス名「wi」「wi-wind」と使用したい風マークアイコンのクラス名を指定します。 使用したいアイコンのクラス名を探すには、まず「Weather Icons」にアクセスします。

「Wind Degree Examples」以下のアイコン一覧

下にスクロールすると「Wind Degree Examples」「Wind Cardinal Examples」のアイコン一覧があるので、そこにあるものから選びます。 HTMLタグにクラス名を指定しアイコンを表示する方法だと、上記の2つからしか選べません。

他のアイコンを使用したい場合は:before,:after疑似要素を使うか、「天気アイコンをwebフォントとして使える「Weather Icons」」のページに記載してある方法でアイコンフォントを表示させてください。

※疑似要素を使ったアイコンフォントの表示方法もそちらに記載しています。

風のアイコン一覧のクラス名の場所

使用したいアイコン名は上記画像の場合であれば「towards-0-deg」の部分になります。 なので、そのクラス名と「wi」「wi-wind」の2つのクラス名を併せてHTMLタグのclass属性の値に指定します。

そうすると下記のようになります。

<i class="wi wi-wind towards-0-deg"></i>

これで上のHTMLタグを書いた場所にアイコンが表示されます。

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

風マークのアイコンフォントは、画像ではなくフォントなので、通常のテキストのスタイルを指定する時と同じように設定できます。 例えば色を変えただけなのですが、下記のように指定することができます。

.wi-wind {
  font-size:40px;
  color: #924da3;
}
<i class="wi wi-wind towards-0-deg"></i>
<i class="wi wi-wind towards-23-deg"></i>
<i class="wi wi-wind towards-313-deg"></i>
<i class="wi wi-wind wi-from-nnw"></i>
<i class="wi wi-wind wi-towards-nne"></i>
<i class="wi wi-wind wi-from-wsw"></i>
<i class="wi wi-wind wi-from-wnw"></i>
風マークのアイコンフォントを表示させたサンプル

他にも背景を付けただけですが、下のようにもできますし、疑似要素を使う、もしくは「天気アイコンをwebフォントとして使える「Weather Icons」」のページの方法を使うと下のような風速などのアイコンも使えるのでやってみて下さい。

風マークのアイコンに背景を付けたサンプル 風速やその他の風マークのアイコンのサンプル

まとめ

こんな感じで簡単に風マークに関するアイコンをサイトに導入できます。 ただ風向きに関するアイコンはHTMLで、風速や風マークのアイコンは疑似要素でって感じになりますけど(^^;)

風マークに関するアイコンは「Weather Icons」に一通り揃っているので機会があれば使って見て下さいね(^^♪