人気の天気アイコン208個セット

cap2

WEATHER ICON SET FONTは人気の天気アイコン208個セットです。商用でも無料で利用できます。

ベクター形式のSVGなので、大きさを自由に変更できます。ダウンロードすると、「svg」フォルダにsvg形式のファイルが入っているので、illustratorで編集できます。

アイコンフォントとして便利に利用できるCSSも用意されています。

アイコンフォントの使い方

ダウンロードしたファイルの「pe-icon-set-weather」フォルダを利用します。

まずは、cssを読み込みます。

<head>
<link rel="stylesheet" href="pe-icon-set-weather/css/pe-icon-set-weather.css">
<link rel="stylesheet" href="pe-icon-set-weather/css/helper.css">
</head>

後は、表示したアイコンを指定するだけです。

<span class="pe-is-w-degree-celsius"></span>

01

アイコンの大きさを指定できます。
pe-lg、pe-2x、pe-3x、pe-4x、pe-5xで、30%ずつ大きなります。

<p><i class="pe-is-w-umbrella pe-lg pe-va"></i> pe-is-w-umbrella</p>
<p><i class="pe-is-w-umbrella pe-2x pe-va"></i> pe-is-w-umbrella</p>
<p><i class="pe-is-w-umbrella pe-3x pe-va"></i> pe-is-w-umbrella</p>
<p><i class="pe-is-w-umbrella pe-4x pe-va"></i> pe-is-w-umbrella</p>
<p><i class="pe-is-w-umbrella pe-5x pe-va"></i> pe-is-w-umbrella</p>

02

「pe-border」で枠線を表示します。

<i class="pe pe-is-w-sun-horizon-2 pe-2x pull-left pe-border"></i>

03

「pe-spin」でアイコンをくるくると回転します。

<i class="pe-is-w-sun-1 pe-spin"></i>
<i class="pe-is-w-moon-3 pe-spin"></i>
<i class="pe-is-w-full-moon-3 pe-spin"></i>

04

「pe-rotate-* 」や「and pe-flip-*」でアイコンを傾けて表示します。

<i class="pe-is-w-eclipse-1"></i>&nbsp; normal<br>
<i class="pe-is-w-eclipse-1 pe-rotate-90"></i>&nbsp; pe-rotate-90<br>
<i class="pe-is-w-eclipse-1 pe-rotate-180"></i>&nbsp; pe-rotate-180<br>
<i class="pe-is-w-eclipse-1 pe-rotate-270"></i>&nbsp; pe-rotate-270<br>
<i class="pe-is-w-eclipse-1 pe-flip-horizontal"></i>&nbsp; pe-flip-horizontal<br>
<i class="pe-is-w-eclipse-1 pe-flip-vertical"></i>&nbsp; pe-flip-vertical

05

より詳しい使い方はこちら

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 738