Creative Brands

With Creative Brands you can easily add to your website links to your profiles on Facebook, Twitter, Google+, Youtube and many others. Links are easy to customize. You can change size, color, shape or animation effect.

We are using icons from Font Awesome and animations from Animate.css.

I WANT IT

Examples

You have to add classes into tag <ul>. You cannot modify links indivudally.

Every <li> tag has the same form. <a> tag must have the similar class as its following <a> tag. It's very important because each brand icon has on hover diffrent background-color. Here is the example code:

<li><a href="#" class="brands-facebook"><i class="fa fa-facebook"></i></a></li>
Brands on extra small devices (max-width: 767px) has colored icons without hover.

Default class brands

<ul class="brands">
    <li>...</li>
</ul>

Inline class brands brands-inline

<ul class="brands brands-inline">
    <li>...</li>
</ul>

Justified class brands brands-justified

<ul class="brands brands-justified">
    <li>...</li>
</ul>

Sizes brands-tn, brands-sm, brands, brands-lg, brands-hg

<ul class="brands brands-tn brands-inline"><li>...</li></ul>
<ul class="brands brands-sm brands-inline"><li>...</li></ul>
<ul class="brands brands-md brands-inline"><li>...</li></ul>
<ul class="brands brands-inline"><li>...</li></ul>
<ul class="brands brands-lg brands-inline"><li>...</li></ul>
<ul class="brands brands-hg brands-inline"><li>...</li></ul>

Colors brands-inverse, brands-colored

<ul class="brands brands-inverse brands-inline"><li>...</li></ul>
<ul class="brands brands-colored brands-inline"><li>...</li></ul>
Special color classes - brands-transparent and brands-transparent-inverse.

Shapes brands-rounded, brands-circle

<ul class="brands brands-rounded brands-inline"><li>...</li></ul>
<ul class="brands brands-circle brands-inline"><li>...</li></ul>

Animations brands-transition, brands-spin, brands-pulse, brands-bounce, brands-flash, brands-shake, brands-swing, brands-tada, brands-wobble

<ul class="brands brands-transition brands-inline"><li>...</li></ul>
<ul class="brands brands-spin brands-inline"><li>...</li></ul>
<ul class="brands brands-pulse brands-inline"><li>...</li></ul>
<ul class="brands brands-bounce brands-inline"><li>...</li></ul>
<ul class="brands brands-flash brands-inline"><li>...</li></ul>
<ul class="brands brands-shake brands-inline"><li>...</li></ul>
<ul class="brands brands-swing brands-inline"><li>...</li></ul>
<ul class="brands brands-tada brands-inline"><li>...</li></ul>
<ul class="brands brands-wobble brands-inline"><li>...</li></ul>

All brands

<li><a href="#" class="brands-adn"><i class="fa fa-adn"></i></a></li>
<li><a href="#" class="brands-android"><i class="fa fa-android"></i></a></li>
<li><a href="#" class="brands-apple"><i class="fa fa-apple"></i></a></li>
<li><a href="#" class="brands-behance"><i class="fa fa-behance"></i></a></li>
<li><a href="#" class="brands-behance"><i class="fa fa-behance-square"></i></a></li>
<li><a href="#" class="brands-bitbucket"><i class="fa fa-bitbucket"></i></a></li>
<li><a href="#" class="brands-bitbucket"><i class="fa fa-bitbucket-square"></i></a></li>
<li><a href="#" class="brands-btc"><i class="fa fa-btc"></i></a></li>
<li><a href="#" class="brands-codepen"><i class="fa fa-codepen"></i></a></li>
<li><a href="#" class="brands-css3"><i class="fa fa-css3"></i></a></li>
<li><a href="#" class="brands-delicious"><i class="fa fa-delicious"></i></a></li>
<li><a href="#" class="brands-deviantart"><i class="fa fa-deviantart"></i></a></li>
<li><a href="#" class="brands-digg"><i class="fa fa-digg"></i></a></li>
<li><a href="#" class="brands-dribbble"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" class="brands-dropbox"><i class="fa fa-dropbox"></i></a></li>
<li><a href="#" class="brands-drupal"><i class="fa fa-drupal"></i></a></li>
<li><a href="#" class="brands-empire"><i class="fa fa-empire"></i></a></li>
<li><a href="#" class="brands-facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="brands-facebook"><i class="fa fa-facebook-square"></i></a></li>
<li><a href="#" class="brands-flickr"><i class="fa fa-flickr"></i></a></li>
<li><a href="#" class="brands-foursquare"><i class="fa fa-foursquare"></i></a></li>
<li><a href="#" class="brands-git"><i class="fa fa-git"></i></a></li>
<li><a href="#" class="brands-git"><i class="fa fa-git-square"></i></a></li>
<li><a href="#" class="brands-github"><i class="fa fa-github"></i></a></li>
<li><a href="#" class="brands-github"><i class="fa fa-github-alt"></i></a></li>
<li><a href="#" class="brands-github"><i class="fa fa-github-square"></i></a></li>
<li><a href="#" class="brands-gittip"><i class="fa fa-gittip"></i></a></li>
<li><a href="#" class="brands-google"><i class="fa fa-google"></i></a></li>
<li><a href="#" class="brands-google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="brands-google-plus"><i class="fa fa-google-plus-square"></i></a></li>
<li><a href="#" class="brands-hacker"><i class="fa fa-hacker-news"></i></a></li>
<li><a href="#" class="brands-html5"><i class="fa fa-html5"></i></a></li>
<li><a href="#" class="brands-instagram"><i class="fa fa-instagram"></i></a></li>
<li><a href="#" class="brands-joomla"><i class="fa fa-joomla"></i></a></li>
<li><a href="#" class="brands-jsfiddle"><i class="fa fa-jsfiddle"></i></a></li>
<li><a href="#" class="brands-linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="brands-linkedin"><i class="fa fa-linkedin-square"></i></a></li>
<li><a href="#" class="brands-linux"><i class="fa fa-linux"></i></a></li>
<li><a href="#" class="brands-maxcdn"><i class="fa fa-maxcdn"></i></a></li>
<li><a href="#" class="brands-openid"><i class="fa fa-openid"></i></a></li>
<li><a href="#" class="brands-pagelines"><i class="fa fa-pagelines"></i></a></li>
<li><a href="#" class="brands-pied-piper"><i class="fa fa-pied-piper"></i></a></li>
<li><a href="#" class="brands-pied-piper"><i class="fa fa-pied-piper-alt"></i></a></li>
<li><a href="#" class="brands-pinterest"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#" class="brands-pinterest"><i class="fa fa-pinterest-square"></i></a></li>
<li><a href="#" class="brands-qq"><i class="fa fa-qq"></i></a></li>
<li><a href="#" class="brands-rebel"><i class="fa fa-rebel"></i></a></li>
<li><a href="#" class="brands-reddit"><i class="fa fa-reddit"></i></a></li>
<li><a href="#" class="brands-reddit"><i class="fa fa-reddit-square"></i></a></li>
<li><a href="#" class="brands-renren"><i class="fa fa-renren"></i></a></li>
<li><a href="#" class="brands-share"><i class="fa fa-share-alt"></i></a></li>
<li><a href="#" class="brands-share"><i class="fa fa-share-alt-square"></i></a></li>
<li><a href="#" class="brands-skype"><i class="fa fa-skype"></i></a></li>
<li><a href="#" class="brands-slack"><i class="fa fa-slack"></i></a></li>
<li><a href="#" class="brands-soundcloud"><i class="fa fa-soundcloud"></i></a></li>
<li><a href="#" class="brands-spotify"><i class="fa fa-spotify"></i></a></li>
<li><a href="#" class="brands-stack-exchange"><i class="fa fa-stack-exchange"></i></a></li>
<li><a href="#" class="brands-stack-overflow"><i class="fa fa-stack-overflow"></i></a></li>
<li><a href="#" class="brands-steam"><i class="fa fa-steam"></i></a></li>
<li><a href="#" class="brands-steam"><i class="fa fa-steam-square"></i></a></li>
<li><a href="#" class="brands-stumbleupon"><i class="fa fa-stumbleupon"></i></a></li>
<li><a href="#" class="brands-stumbleupon"><i class="fa fa-stumbleupon-circle"></i></a></li>
<li><a href="#" class="brands-tencent-weibo"><i class="fa fa-tencent-weibo"></i></a></li>
<li><a href="#" class="brands-trello"><i class="fa fa-trello"></i></a></li>
<li><a href="#" class="brands-tumblr"><i class="fa fa-tumblr"></i></a></li>
<li><a href="#" class="brands-tumblr"><i class="fa fa-tumblr-square"></i></a></li>
<li><a href="#" class="brands-twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="brands-twitter"><i class="fa fa-twitter-square"></i></a></li>
<li><a href="#" class="brands-vimeo"><i class="fa fa-vimeo-square"></i></a></li>
<li><a href="#" class="brands-vine"><i class="fa fa-vine"></i></a></li>
<li><a href="#" class="brands-vk"><i class="fa fa-vk"></i></a></li>
<li><a href="#" class="brands-weibo"><i class="fa fa-weibo"></i></a></li>
<li><a href="#" class="brands-weixin"><i class="fa fa-weixin"></i></a></li>
<li><a href="#" class="brands-windows"><i class="fa fa-windows"></i></a></li>
<li><a href="#" class="brands-wordpress"><i class="fa fa-wordpress"></i></a></li>
<li><a href="#" class="brands-xing"><i class="fa fa-xing"></i></a></li>
<li><a href="#" class="brands-xing"><i class="fa fa-xing-square"></i></a></li>
<li><a href="#" class="brands-yahoo"><i class="fa fa-yahoo"></i></a></li>
<li><a href="#" class="brands-youtube"><i class="fa fa-youtube"></i></a></li>
<li><a href="#" class="brands-youtube"><i class="fa fa-youtube-play"></i></a></li>
<li><a href="#" class="brands-youtube"><i class="fa fa-youtube-square"></i></a></li>

© Copyright all rights reserved. 2014 Pixelized Studio.