マルチレイヤーで多色表現できる天気用のアイコンフォント「Forecast Font」

当ページのリンクには広告が含まれています。

半年くらい前に「1つのアイコンで2色設定できるアイコンフォントを使ってみる」という記事を書いたのですが、同じように多色を使ったアイコンフォントを見つけました。

天気用のアイコンフォントで、その名も「Forecast Font」です。

INDEX

Forecast Font

このサイト上からデモが見られたり、実際にダウンロードできます。表示されるアイコンフォントは以下のようなものです。

f:id:c-miya:20190117192143j:plain

やっていることは以前私が書いたのと基本的に同じで、cssの疑似要素の::beforeや::afterを使ってマルチレイヤーを実現しています。

f:id:c-miya:20190117193256j:plain
面白いのは上のようなアイコン(これは画像ですが、本体はアイコンフォント)を表示するのに、html部分は以下のようになっていること。

   <ul>
<li class="basecloud"></li>
<li class="icon-showers icon-sunny"></li>
</ul>

1つのアイコンを示すのに2つの<li>を使っており、最初の方は”basecloud”で、2つ目の方は”icon-showers”と”icon-sunny”の2つを使っています。どのclassにもposition:absoluteが指定されているので、すべてが重なります。そして、雲と雨、太陽の3つがパーツごとに分かれてclass名が付いています。

つまり、天気ごとにすべて指定しているのではなく、パーツを指定して、それを組み合わせて表示しているということです。うん、面白い。

まぁ、全部position:absoluteなので、なにかで囲ってあげないと使いにくいんじゃないか…とは思うんですが。

けっこう昔からあった

このForecast Fontがいつからあるのかちょっとわからないですが、ダウンロードしたファイルの作成日は2013年5月でした。5年半以上前ですね。そんな前からあったようです。やっぱり似たようなこと考える人はいたんですね。ちょっと安心しました。

ただ、ほかの例をそんなに聞かないので、やっぱり使い所が難しかったりで流行らないんですかね。多色にする意味…なんていうのもありますし。どうなんでしょ。

シェアしてね!

この記事を書いた人

静岡県静岡市清水区在住のウェブサイト運営者。ネット上ではc-miya、orefolderなどの名前で活動しています。

ストレスに弱いので、できるだけ好きなことだけをして生きたいと思いながら生活しています。「楽しい」が優先順位の一番上に来るようにしたいですね。

INDEX