Weather::Icons::Rails Gem Version Build Status

Weather-Icons-Rails gem for use in Ruby projects

A free, open source font of Weather icons

Weather Icons is a font of 92 weather themed icons, ready to be dropped right into Bootstrap or any other project.

Inspired by Font Awesome, They work in essentially the same way. They are infinitely scalable and any CSS that can be applied to text can be applied to them. All you need to do to insert an icon is add the class to an "i" element like this: <i class="wi wi-day-lightning"></i>

View demo and full icon reference

Getting Started

The original author Erik put these web fonts together, I have packaged his hard work into a simple Sass based gem.

To install simply add

gem 'weather-icons-rails'

then after bundeling add

*= require weather-icons

right before *= require_self

Now it's time to have at it, and class up your HTML.

To add icons anywhere in your html just add one of these tags with your symbole of choice:

<i class="wi wi-day-lightning"></i>

If that wasn't easy enough, Helpers make it even easier!

In your view just add these to your HAML or ERB:
wi_icon('day-lightning')
# => <i class="wi wi-day-lightning"></i>

wi_icon('day-lightning', '', class: 'strong')
# => <i class="wi wi-day-lightning strong"></i>

wi_icon "day-lightning lg", class: "text-muted pull-left"
# => <i class="wi wi-day-lightning wi-lg text-muted pull-left"></i>

wi_icon('day-lightning', 'Weather Icons', id: 'lightning', class: 'strong')
# => <i id="lightning" class="wi wi-day-lightning strong"></i> Weather Icons

content_tag(:li, wi_icon("day-lightning li", text: "Bulleted list item"))
# => <li><i class="wi wi-day-lightning wi-li"></i> Bulleted list item</li>

I cant really think of a use for this, but I'm sure someone can. Works better with empty box icon in Font Awesome.

wi_stacked_icon "day-lightning", base: "day-cloudy-gusts"
# => <span class="fa-stack">
# =>   <i class="wi wi-day-cloudy-gusts wi-stack-2x"></i>
# =>   <i class="wi wi-day-lightning wi-stack-1x"></i>
# => </span>

wi_stacked_icon "day-lightning inverse", base: 'day-cloudy-gusts', class: "pull-right", text: "Hi!"
# => <span class="wi-stack pull-right">
# =>   <i class="wi wi-day-cloudy-gusts wi-stack-2x"></i>
# =>   <i class="wi wi-day-lightning wi-inverse wi-stack-1x"></i>
# => </span> Hi!

Weathered Lists:

Use wi-li tag with an icon nested inside a ul.wi-ul > li list to have it used as the bullet point. Must have text or element after it to work
wi_list_item('wi-day-hail', 'Bad Weather Today')
# => <li><i class="wi wi-day-hail wi-li"></i> Bad Weather Today</li>

wi_list_item('wi-day-hail md', 'Bad Weather Today', icon_options: {class: 'inverse'}, class: 'something' )
# => <li class="something"><i class="wi wi-day-hail wi-md wi-li inverse"></i> Bad Weather Today</li>

wi_list('wi-day-hail', ['Bad Weather', 'Good Weather'])
# => <ul class: 'wi-ul'>
# =>   <li>
# =>     <i class="wi wi-day-hail wi-li"></i> Bad Weather
# =>   </li>
# =>   <li>
# =>     <i class="wi wi-day-hail wi-li"></i> Good Weather
# =>   </li>
# => </ul>

wi_list('wi-day-hail lg', ['Bad Weather', 'Good Weather'], icon_options: {class: 'pull-right'}, class: 'something' )
# => <ul class: 'wi-ul'>
# =>   <li class="something">
# =>     <i class="wi wi-day-hail wi-lg wi-li pull-right"></i> Bad Weather
# =>   </li>
# =>   <li class="something">
# =>     <i class="wi wi-day-hail wi-lg wi-li pull-right"></i> Good Weather
# =>   </li>
# => </ul>

Fancy css classes for fancy people.

Supported classes:

  .wi-spin

  .wi-rotate-90
  .wi-rotate-180
  .wi-rotate-270

  .wi-flip-horizontal
  .wi-flip-vertical  

  .wi-ul  # Use this to create a nicely formated vertical list of icons
  .wi-li  # Assigne to icon for bullet points

  .wi-xs
  .wi-md
  .wi-lg
  .wi-xl
  .wi-2x
  .wi-3x
  ...
  .wi-9x

  .wi-fw // Fixed Width Icons

  .wi-border

Version 0.1.0

This is my first attempt at making a gem, please feel free to send me any pull requests or questions. I'm happy to help and or learn. Thanks!

The icon designs are originally by Lukas Bischoff. The font has been modified slightly for icon-font usage, which was then turned into a HTML/CSS/LESS addon by Erik Flowers. My gem was originally based off of the hard work over at Font Awesome Rails and then updated to closely mirror the Sass based version at Font Awesome Sass.

Collaboration

Any additional icon ideas, icon art, or other fixes/changes to how the package works are more than welcome.

Credit

None of this would be possible without Bootstrap, Font Awesome, Lukas Bischoff, and Erik Flowers. I just put it into a gem and added the helpers, and extra styling css classes from font-awesome-sass. Cheatsheet provided by Michael Woywod.

Weather Icons licensed under SIL OFL 1.1 — Code licensed under MIT License — Documentation licensed under CC BY 3.0

Contact

Weather Icons Rails is maintained by me, Cody Schaaf. Reach me at @TheCodingCody or through GitHub.