Social

Beta Added in 2.0.0

Add social media colors to icons and buttons.

Usage

Add one of the following classes to an existing icon or button element to apply that company’s brand color.

Class	Description
`.gls-social-facebook`	Adds Facebook’s brand color.
`.gls-social-flickr`	Adds Flickr’s brand color.
`.gls-social-github`	Adds GitHub’s brand color.
`.gls-social-google`	Adds Google’s brand color.
`.gls-social-instagram`	Adds Instagram’s brand color.
`.gls-social-linkedin`	Adds LinkedIn’s brand color.
`.gls-social-pinterest`	Adds Pinterest’s brand color.
`.gls-social-reddit`	Adds Reddit’s brand color.
`.gls-social-tumblr`	Adds Tumblr’s brand color.
`.gls-social-twitter`	Adds Twitter’s brand color.
`.gls-social-vimeo`	Adds Vimeo’s brand color.
`.gls-social-wordpress`	Adds Wordpress’s brand color.
`.gls-social-youtube`	Adds Youtube’s brand color.

Iconnav

To apply colors to elements within an iconnav component, add a .gls-social-* class to each gls-icon element.

<ul class="gls-iconnav">
    <li><a href="" gls-icon="icon: facebook" class="gls-icon gls-social-facebook"></a></li>
</ul>

<ul class="gls-iconnav">
    <li><a href="#" gls-icon="facebook" class="gls-icon gls-social-facebook"></a></li>
    <li><a href="#" gls-icon="twitter" class="gls-icon gls-social-twitter"></a></li>
    <li><a href="#" gls-icon="pinterest" class="gls-icon gls-social-pinterest"></a></li>
</ul>

Icon button

To apply colors to icon buttons, add a .gls-social-* class to each gls-icon-button element.

<a href="#" gls-icon="instagram" class="gls-icon-button gls-social-instagram"></a>

<ul class="gls-grid-small gls-flex-middle gls-grid" gls-grid>
    <li><a href="#" gls-icon="instagram" class="gls-icon-button gls-social-instagram"></a></li>
    <li><a href="#" gls-icon="pinterest" class="gls-icon-button gls-social-pinterest"></a></li>
    <li><a href="#" gls-icon="reddit" class="gls-icon-button gls-social-reddit"></a></li>
</ul>

To apply colors to buttons, add a .gls-social-* class to each gls-button element. Buttons with the gls-button-default modifier will have a transparent background and colored borders and text. Buttons with gls-button-primary or gls-button-secondary will have colored backgrounds and white text.

<a href="#" class="gls-button gls-button-primary gls-social-vimeo">
    <span class="gls-margin-small-right gls-icon" gls-icon="icon: vimeo; ratio: 0.75"></span>
    Vimeo
</a>

Note You may need to play with the size of the icon using the ratio parameter.

Vimeo Youtube

<p gls-margin>
    <a href="#" class="gls-button gls-button-default-outline gls-button-small gls-social-vimeo">
        <span class="gls-margin-small-right gls-icon" gls-icon="icon: vimeo; ratio: 0.625"></span>
        Vimeo
    </a>
    <a href="#" class="gls-button gls-button-primary gls-button-small gls-social-youtube">
        <span class="gls-margin-small-right gls-icon" gls-icon="icon: youtube; ratio: 0.625"></span>
        Youtube
    </a>
</p>