owfont - symbol font for Open Weather Map API

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 »

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>
          

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>
        

<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>
        

• 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>
        

<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>