Multi-coloured, scalable icons using web fonts

By combining individual weather characters together, we can create a whole set of scalable, multi-coloured weather icons that can be re-used across all BBC products.

Each character is bound to a glyph within the private unicode area—a range within the unicode table that isn't interpreted, or read aloud, by screenreaders. Despite the common technique of inserting font icons using CSS generated content, some screenreaders can read aloud that content. Binding a play icon to an 'p' could result in 'p play' being read aloud, for example). See our GEL icons to see the other icons we use. Layering each glyph directly on top of one another gives the illusion of a single icon.

We built our font using Glyphs Mini (Mac only) which allows you to drop vectors from Illustrator into any unicode slot you want. FontSquirrel allows us to output the font into multiple formats to be used cross-browser.

Any device that doesn't support web fonts gets a weather sprite as a fallback.

Clear Sky (Night)

Sunny

Partly Cloudly (Night)

Sunny Intervals

White Cloud

Grey Cloud

Light Rain Shower (Night)

Light Rain Shower

Light Rain

Drizzle

Heavy Rain Shower (Night)

Heavy Rain Shower

Heavy Rain

Sleet Shower (Night)

Sleet Shower

Sleet

Hail Shower (Night)

Hail Shower

Hail

Light Snow Shower (Night)

Light Snow Shower

Light Snow

Heavy Snow Shower (Night)

Heavy Snow Shower

Heavy Snow

Thundery Shower (Night)

Thundery Shower

Thunder Storm

Fog

Hazy

Mist

Sandstorm

Tropical Storm