Project

weather-icons-rails

0.02
No commit activity in last 3 years
No release in over 3 years
weather-icons-railscodyschaaf/weather-icons-railsHomepageDocumentationSource CodeWiki
I like font-awesome, weather-icons, and rails. So I am doing my best to combine weather-icons into an easy to use gem.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Popularity
Downloads
28,370
Stars
6
Forks
17
Watchers
3
 Releases
Current version
0.1.1
Total releases
6
First release
2014-04-15
Latest release
2014-04-15
 Pull Requests
Open Pull Requests
0
Closed Pull Requests
0
Merged Pull Requests
2
Pull Request Acceptance Rate
100%
 Development
Primary Language
CSS
Licenses
MIT
Average date of last 50 commits
2014-04-14
Reverse Dependencies
1

 Dependencies

Development

activesupport
~> 4.1.0
bundler
~> 1.3
compass
>= 0
rake
~> 10.3.0
sass-rails
~> 4.0.1

Runtime

railties
< 5.0, >= 3.2
sass
~> 3.2
 Project Readme

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.