Gem Version Build Status

Social-colors-rails

Based on font-awesome, social_colors_rails provide official colors of social brand icons. See them on the Social colors rails example page.

Installation

Add these line to your application’s Gemfile:

gem 'font-awesome-rails'
gem 'social_colors_rails'

And then execute bundle install

– Simple use –

For simple use, add it to your rails asset-pipeline

/*
 *= require font-awesome
 *= require social_colors_rails
 * Or for production
 *= require social_colors_rails.min
 */

in your application.css file

Or if you work with SASS

@import "font-awesome";
@import "social_colors_rails";

– Customized –

You can customize the social_colors_rails plugin by importing the sass file and overwrite variables.

// Import your custom variables before the social_colors lib
@import "_custom_variables";

@import "font-awesome";
@import "social_colors_rails/init";

Usage

The prefered method is to use the social_tag helper


social_tag
#  => <a class="icon-stack stack-circle facebook" target="_blank" rel="external nofollow" href="#">
#       <i class="fa fa-facebook"></i>
#     </a>

social_tag url: "https://www.facebook.com/devsbrain/"
#  => <a class="icon-stack stack-square facebook" target="_blank" rel="external nofollow" href="https://www.facebook.com/devsbrain/">
#       <i class="fa fa-facebook"></i>
#     </a>

social_tag "github", "https://github.com/TimVille"
#  => <a class="icon-stack stack-circle github" target="_blank" rel="external nofollow" href="https://github.com/TimVille">
#       <i class="fa fa-github"></i>
#     </a>

social_tag "github", "https://github.com/TimVille", style: "square"
#  => <a class="icon-stack stack-square github" target="_blank" rel="external nofollow" href="https://github.com/TimVille">
#       <i class="fa fa-github"></i>
#     </a>

social_tag "github", "https://github.com/TimVille", size: "2x"
#  => <a class="icon-stack stack-circle github stack-2x" target="_blank" rel="external nofollow" href="https://github.com/TimVille">
#       <i class="fa fa-github"></i>
#     </a>

social_tag "github", "https://github.com/TimVille", title: "My awesome link title"
#  => <a class="icon-stack stack-circle github" target="_blank" rel="external nofollow" title="My awesome link title" href="https://github.com/TimVille">
#       <i class="fa fa-github"></i>
#     </a>

social_tag "github", "https://github.com/TimVille", nofollow: false
#  => <a class="icon-stack stack-circle github" target="_blank" rel="external" href="https://github.com/TimVille">
#       <i class="fa fa-github"></i>
#     </a>

social_tag "github", "https://github.com/TimVille", external: false
#  => <a class="icon-stack stack-circle github" target="_blank" href="https://github.com/TimVille">
#       <i class="fa fa-github"></i>
#     </a>

But if you prefer, you can just wrap your font-awesome icon with these classes

<div class="icon-stack |brand-name|"></div>

–NEW!–

New button are available with text possibilities. To add it with a rails helper, just use a link_to

link_to "Your text", "#", class: "btn btn-social btn-|size| |brand-name|"

<!-- Plain button -->
<a href="#" class="btn btn-social |brand-name| btn-|size|">
  Your text here <i class="fa fa-|brand-name|"></i>
</a>

<!-- Outline button -->
<a href="#" class="btn btn-social-outline |brand-name| btn-|size|">
  Your text here <i class="fa fa-|brand-name|"></i>
</a>

– Options –

Options are available for stack style and stack size. Add them next to icon-stack class to apply them!

Stack styles

stack-circle stack-square stack-square-o

Stack & button Sizes

(stack||btn)-2x (stack||btn)-3x (stack||btn)-4x

– Sass variables –

//
// Stack parameters
//
$stack-lighten-amount:         10%;
$stack-darken-amount:          10%;
$stack-alpha-amount:           0;
$stack-hover-color:            #424242;
$stack-hover-color-inverse:    #424242;

$stack-shadow-color:           transparentize(#000, 0.8);
$stack-shadow-length:          6;
$stack-shadow-blur:            4px;

$border-width:                 3px;
$border-width-2x:              4px;
$border-width-3x:              5px;
$border-width-4x:              6px;

$stack-square-radius:          20%;
$btn-outline-radius:           8px;

$stack-4x:                     3em;
$stack-3x:                     2.5em;
$stack-2x:                     2em;

$stack-anim-duration:          .3s;
$stack-anim-ease:              ease;


//
// Font-awesome icon shadow parameters
//
$icon-shadow-blur:             1px;
$icon-shadow-lighten-amount:   20%;
$icon-shadow-darken-amount:    30%;
$icon-shadow-alpha-amount:     0.7;
$icon-shadow-color:            #000;
$icon-shadow-color-inverse:    #000;
$icon-shadow-length:           100;
$icon-shadow-length-o:         6;

$icon-color:                   #fff;

$icon-hover-lighten-amount:    10%;
$icon-bg-hover-lighten-amount: 3%;

$icon-anim-duration:           .4s;
$icon-anim-ease:               ease;


//
//  Button parameters
//

$btn-hover-lighten-amount:     10%;
$btn-bg-hover-lighten-amount:  3%;

Exemple

<div class="icon-stack stack-circle github stack-4x">
  <i class="fa fa-github"></i>
</div>

Available brand colors

Brand names

Contributing

You can contribute by forking this project. Enjoy!

License

The gem is available as open source under the terms of the MIT License.