owfont - symbol font for Open Weather Map API

OpenWeatherFont (owfont) is designed to match to weather condition codes from Open Weather Map API. CSS rules are based on Font-Awesome font, symbols are created by Deniz Fuchidzhiev.

Download View at GitHub Usage

Designed for OpenWeatherMap API

owfont is designed to match to weather condition codes returned by OpenWeatherMap API. Just use the response code as class name (prefixed with owf) and your icon will appear.

View details »

CSS based on Font-Awesome

Almost all css rules are inherited from Font-Awesome. You can easaly use all options like icon size control, list, etc... just replace fa with owf.

View details »


Icons

Thunderstorm

200

201

202

210

211

212

221

230

231

232

Drizzle

300

301

302

310

311

312

313

314

321

Rain

500

501

502

503

504

511

520

521

522

531

Snow

600

601

602

611

612

615

616

620

621

622

Atmosphere

701

711

721

731

741

751

761

762

771

781

Clouds

800

800

801

801

802

802

803

804

Extreme

900

901

902

903

904

905

906

Additional

950

951

952

953

954

955

956

957

958

959

960

961

962


Some icons has additional versions for day and night. These versions can be used with suffix -d for day and -n for night. If you use these suffixes, the icons without day/night version will return default icon. Check samples below.

The 951 condition code is an alias of code 800 - day and night versions are available as above.

Usage

Basic usage

  1. Include the owfont stylesheet in your HTML code
    Sample
    <link href="css/owfont-regular.css" rel="stylesheet" type="text/css">
    (Your path may be different)
  2. Upload the fonts folder containing all owfont fonts and check paths from stylesheet
  3. Make your call to OpenWeatherMap API (follow the instructions here)
  4. Extract from the result the condition code.
  5. Use the condition code as class name prefixed with owf-
    Class name sample owf-200
    Icon sample <i class="owf owf-200"></i>

Usage with day/night versions

  1. Follow all previous steps
  2. Include some script to determine night or day
  3. With the help of your custom script add to icon class suffix -d for day or -n for night
    <i class="owf owf-800-d"></i>
  4. If current condition code doesn't has versions for day and night, the default icon will appear, no matter of used suffix

Examle of JSON call
This example comes from OpenWeatherMap API documentation

{"coord":{"lon":139,"lat":35},
"sys":{"country":"JP","sunrise":1369769524,"sunset":1369821049},
"weather":[{"id":804,"main":"clouds","description":"overcast clouds","icon":"04n"}],
"main":{"temp":289.5,"humidity":89,"pressure":1013,"temp_min":287.04,"temp_max":292.04},
"wind":{"speed":7.31,"deg":187.002},
"rain":{"3h":0},
"clouds":{"all":92},
"dt":1369824698,
"id":1851632,
"name":"Shuzenji",
"cod":200}
          

Examle of PHP usage
This example has demonstration purpose, you can use various different methods to display the result

<?php
  $json_string = 'http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139';
  $jsondata = file_get_contents($json_string);
  $obj = json_decode($jsondata, true);
?>
<i class="owf owf-<?php echo $obj['weather'][0]['id'];?>"></i>
          

Examle of PHP usage with day/night versions
This example is very basic and has demonstration purpose, you can use various different methods to display the result

<?php
  $json_string = 'http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139';
  $jsondata = file_get_contents($json_string);
  $obj = json_decode($jsondata, true);
  
  $now = date('U'); //get current time
  
  if($now > $obj['sys']['sunrise'] and $now < $obj['sys']['sunset']){
	$suffix = '-d';
  }else{
	$suffix = '-n';
  }
  
?>
<i class="owf owf-<?php echo $obj['weather'][0]['id'].$suffix;?>"></i>
          

CSS Helpers

Because the owfont is based on font-awesome css rules you can use almost all additional class names (excluding spin and rotate) from font-awesome, but prefixed with owf-

Icon sizes


default height (inherited from current font-size - 14px)

owf-lg 33% increase from the previous size

owf-2x 2 times bigger size

owf-3x 3 times bigger size

owf-4x 4 times bigger size

owf-5x 5 times bigger size

<i class="owf owf-803"></i>
<i class="owf owf-803 owf-lg"></i>
<i class="owf owf-803 owf-2x"></i>
<i class="owf owf-803 owf-3x"></i>
<i class="owf owf-803 owf-4x"></i>
<i class="owf owf-803 owf-5x"></i>
        

Fixed width Icons


<div class="list-group">
  <a class="list-group-item" href="#"><i class="owf owf-800 owf-fw"></i>  sky is clear</a>
  <a class="list-group-item" href="#"><i class="owf owf-801 owf-fw"></i>  few clouds</a>
  <a class="list-group-item" href="#"><i class="owf owf-802 owf-fw"></i>  scattered clouds</a>
  <a class="list-group-item" href="#"><i class="owf owf-803 owf-fw"></i>  broken clouds</a>
  <a class="list-group-item" href="#"><i class="owf owf-804 owf-fw"></i>  overcast clouds</a>
</div>
        

List Icons


  • sky is clear
  • few clouds
  • scattered clouds
  • broken clouds
  • overcast clouds
<ul class="owf-ul">
  <li><i class="owf-li owf owf-800"></i> sky is clear</li>
  <li><i class="owf-li owf owf-801"></i> few clouds</li>
  <li><i class="owf-li owf owf-802"></i> scattered clouds</li>
  <li><i class="owf-li owf owf-803"></i> broken clouds</li>
  <li><i class="owf-li owf owf-804"></i> overcast clouds</li>
</ul>
        

Bordered & Pulled Icons


Shuzenji
Temp 25°C Clear (Sky is Clear)
Min 22°C Max 26°C
<div>
  <i class="owf owf-800 owf-3x owf-pull-left owf-border"></i>
  <strong>Shuzenji</strong><br>
  Temp 25°C Clear (Sky is Clear)<br>
  Min 22°C Max 26°C
</div>
        

License

Font

owfont licensed under SIL OFL 1.1

Code

code licensed under MIT License

Documentation

documentation licensed under CC BY 3.0