Icon Fonts with Simple Weather

Getting Started


If you haven’t ever heard of Simple Weather you should go and try in out. Simple Weather is:

“A simple jQuery plugin to display the current weather information for any location using Yahoo! Weather. Developed by James Fleeting.”

Making weather web apps is pretty fun and easy. If you haven’t made one, you should go and try it out.

Adding Icon Fonts for Weather Codes


First if you have never used icon fonts you should read an article on CSS-Tricks to learn how. If you are interested in creating your own icon fonts, I have written an article Creating Icon Fonts.

I found a nice weather icon font that is free with a share on facebook too.

After you have your icon font, to get it to work with Simple Weather you have to do a few things.

Step 1


Add this code below inside the success: function(weather) { }

html += '<span aria-hidden="true" class="weather-'+weather.code+'" >'+'</span>';

This will add a class of weather-(number for weather code) and we will use this hook to add the icon font.

Step 2


Now we need to modify the CSS to tell it to use classes to add in icon font. If you used IcoMoon to create your icon fonts you will get a nicely generated css file and makes this procress easier.

  1. To help your know what preasigned class/code is asigned to what icons, open up the index.html that IcoMoon supplies you.
  2. View the weather codes to know what code is for what weather condition .

Step 3


Now to assign the icon to the appropriate class in the CSS.

Before

Flexbox Medium

.tornado, .tropical-storm, .thunderstorms, .showers {
    font-family: 'icomoon'; /* Your name may  be different */
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    /* Add more declaration as needed for font-size, color, etc */ 
}

.tornado:before {
    content: "\e000";
}
.tropical-storm:before {
    content: "\e001";
}
.thunderstorms:before {
    content: "\e003";
}
.showers:before {
    content: "\e002";
}

After

Now you need to make sure your class names have the right value inside content:" " for the desired icon.

Remember the number at the end of the class is for the weather codes.

.weather-0, .weather-1,.weather-4, .weather-11 {
    font-family: 'icomoon'; /* Your name may  be different */
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    /* Add more declaration as needed for font-size, color, etc */ 
}

.weather-0:before {
    content: "\e000";
}
.weather-1:before {
    content: "\e001";
}
.weather-3:before {
    content: "\e003";
}
.weather-4:before {
    content: "\e003";
}
.weather-11:before {
    content: "\e002";
}

Flexbox Medium

Now class="weather-0" will display the icon for Tornado.
Now class="weather-1" will display the icon for Tropical Storm.
Now class="weather-3" will display the icon for Severe Thunderstorms.
Now class="weather-4" will display the icon for Thunderstorms.
Now class="weather-11" will display the icon for Showers.

  • Remember to start your class number at 0.
  • You can use the same icon for multiple code too.

Make it an iOS Web App


To make this work you need to add two meta tags to your <head>.

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
  1. Now open the web app in Mobile Safari and add to Home Screen.
  2. Now you will have a full screen instance of Mobile Safari on your iOS device
  • The second meta tag is now required in iOS 7 or the status bar will be solid black.

My Weather App


If you want an example or a staring point you can use my code.

Leave Your Feedback

Name is required.
Email is required.
URL is required.
Message is required.