Docs - Socials

Connect social.css to use socials

Simple socials

<ul class="pi-social-icons-simple">
  <li><a href="#"><i class="icon-rss"></i></a></li>
  <li><a href="#"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#"><i class="icon-weibo"></i></a></li>
  <li><a href="#"><i class="icon-youtube"></i></a></li>
  <li><a href="#"><i class="icon-bitcoin"></i></a></li>
</ul>

Simple socials - base theme color

<ul class="pi-social-icons-simple pi-base">
  <li><a href="#"><i class="icon-rss"></i></a></li>
  <li><a href="#"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#"><i class="icon-weibo"></i></a></li>
  <li><a href="#"><i class="icon-youtube"></i></a></li>
  <li><a href="#"><i class="icon-bitcoin"></i></a></li>
</ul>

Simple socials - big

Add pi-big class to social links list, to make them bigger.

<ul class="pi-social-icons-simple pi-big">
  <li><a href="#" class="pi-social-icon-rss"><i class="icon-rss"></i></a></li>
  <li><a href="#" class="pi-social-icon-stackoverflow"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#" class="pi-social-icon-weibo"><i class="icon-weibo"></i></a></li>
  <li><a href="#" class="pi-social-icon-youtube"><i class="icon-youtube"></i></a></li>
  <li><a href="#" class="pi-social-icon-bitcoin"><i class="icon-bitcoin"></i></a></li>
</ul>

Simple socials - Different text colors

Add pi-colored class to social links list, and wrap them with link that has appropriated class to make their color different on hover.

<ul class="pi-social-icons-simple pi-colored">
  <li><a href="#" class="pi-social-icon-rss"><i class="icon-rss"></i></a></li>
  <li><a href="#" class="pi-social-icon-stackoverflow"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#" class="pi-social-icon-weibo"><i class="icon-weibo"></i></a></li>
  <li><a href="#" class="pi-social-icon-youtube"><i class="icon-youtube"></i></a></li>
  <li><a href="#" class="pi-social-icon-bitcoin"><i class="icon-bitcoin"></i></a></li>
</ul>

Simple socials - Different text colors - activated

Add pi-active class to social links list, and wrap them with link that has appropriated class to make their color different.

<ul class="pi-social-icons-simple pi-active">
  <li><a href="#" class="pi-social-icon-rss"><i class="icon-rss"></i></a></li>
  <li><a href="#" class="pi-social-icon-stackoverflow"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#" class="pi-social-icon-weibo"><i class="icon-weibo"></i></a></li>
  <li><a href="#" class="pi-social-icon-youtube"><i class="icon-youtube"></i></a></li>
  <li><a href="#" class="pi-social-icon-bitcoin"><i class="icon-bitcoin"></i></a></li>
</ul>

Complex socials

<ul class="pi-social-icons">
  <li><a href="#"><i class="icon-rss"></i></a></li>
  <li><a href="#"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#"><i class="icon-weibo"></i></a></li>
  <li><a href="#"><i class="icon-youtube"></i></a></li>
  <li><a href="#"><i class="icon-bitcoin"></i></a></li>
</ul>

Complex socials - base theme color

<ul class="pi-social-icons pi-base">
  <li><a href="#"><i class="icon-rss"></i></a></li>
  <li><a href="#"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#"><i class="icon-weibo"></i></a></li>
  <li><a href="#"><i class="icon-youtube"></i></a></li>
  <li><a href="#"><i class="icon-bitcoin"></i></a></li>
</ul>

Complex socials - big

Add pi-big class to social links list, to make them bigger.

<ul class="pi-social-icons pi-big">
  <li><a href="#" class="pi-social-icon-rss"><i class="icon-rss"></i></a></li>
  <li><a href="#" class="pi-social-icon-stackoverflow"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#" class="pi-social-icon-weibo"><i class="icon-weibo"></i></a></li>
  <li><a href="#" class="pi-social-icon-youtube"><i class="icon-youtube"></i></a></li>
  <li><a href="#" class="pi-social-icon-bitcoin"><i class="icon-bitcoin"></i></a></li>
</ul>

Complex socials - Different text colors

Add pi-colored class to social links list, and wrap them with link that has appropriated class to make their color different on hover.

<ul class="pi-social-icons pi-colored">
  <li><a href="#" class="pi-social-icon-rss"><i class="icon-rss"></i></a></li>
  <li><a href="#" class="pi-social-icon-stackoverflow"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#" class="pi-social-icon-weibo"><i class="icon-weibo"></i></a></li>
  <li><a href="#" class="pi-social-icon-youtube"><i class="icon-youtube"></i></a></li>
  <li><a href="#" class="pi-social-icon-bitcoin"><i class="icon-bitcoin"></i></a></li>
</ul>

Complex socials - Different text colors - Activated

Add pi-active class to social links list, and wrap them with link that has appropriated class to make their color different.

<ul class="pi-social-icons pi-active">
  <li><a href="#" class="pi-social-icon-rss"><i class="icon-rss"></i></a></li>
  <li><a href="#" class="pi-social-icon-stackoverflow"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#" class="pi-social-icon-weibo"><i class="icon-weibo"></i></a></li>
  <li><a href="#" class="pi-social-icon-youtube"><i class="icon-youtube"></i></a></li>
  <li><a href="#" class="pi-social-icon-bitcoin"><i class="icon-bitcoin"></i></a></li>
</ul>

Complex socials - Different bg colors

Add pi-colored-bg class to social links list, and wrap them with link that has appropriated class to make their background color different.

<ul class="pi-social-icons pi-colored-bg">
  <li><a href="#" class="pi-social-icon-rss"><i class="icon-rss"></i></a></li>
  <li><a href="#" class="pi-social-icon-stackoverflow"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#" class="pi-social-icon-weibo"><i class="icon-weibo"></i></a></li>
  <li><a href="#" class="pi-social-icon-youtube"><i class="icon-youtube"></i></a></li>
  <li><a href="#" class="pi-social-icon-bitcoin"><i class="icon-bitcoin"></i></a></li>
</ul>

Complex socials - Different bg colors - Activated

Add pi-active-bg class to social links list, and wrap them with link that has appropriated class to make their background color activated.

<ul class="pi-social-icons pi-colored-bg pi-active-bg">
  <li><a href="#" class="pi-social-icon-rss"><i class="icon-rss"></i></a></li>
  <li><a href="#" class="pi-social-icon-stackoverflow"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#" class="pi-social-icon-weibo"><i class="icon-weibo"></i></a></li>
  <li><a href="#" class="pi-social-icon-youtube"><i class="icon-youtube"></i></a></li>
  <li><a href="#" class="pi-social-icon-bitcoin"><i class="icon-bitcoin"></i></a></li>
</ul>

Complex socials - with shadow

Add pi-drop-shadow class to social links list, to make them have shadow.

<ul class="pi-social-icons pi-drop-shadow">
  <li><a href="#"><i class="icon-rss"></i></a></li>
  <li><a href="#"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#"><i class="icon-weibo"></i></a></li>
  <li><a href="#"><i class="icon-youtube"></i></a></li>
  <li><a href="#"><i class="icon-bitcoin"></i></a></li>
</ul>

Complex socials - with round corners

Add pi-round-corners class to social links list, to make them have round corners.

<ul class="pi-social-icons pi-round-corners">
  <li><a href="#"><i class="icon-rss"></i></a></li>
  <li><a href="#"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#"><i class="icon-weibo"></i></a></li>
  <li><a href="#"><i class="icon-youtube"></i></a></li>
  <li><a href="#"><i class="icon-bitcoin"></i></a></li>
</ul>

Complex socials - jump animation, without background

Add pi-jump class to social links list, to make them have jump animation, without background.

<ul class="pi-social-icons pi-jump">
  <li><a href="#"><i class="icon-rss"></i></a></li>
  <li><a href="#"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#"><i class="icon-weibo"></i></a></li>
  <li><a href="#"><i class="icon-youtube"></i></a></li>
  <li><a href="#"><i class="icon-bitcoin"></i></a></li>
</ul>

Complex socials - jump animation, with background

Add pi-jump and pi-jump-bg class to social links list, to make them have jump animation, with background.

<ul class="pi-social-icons pi-jump pi-jump-bg">
  <li><a href="#"><i class="icon-rss"></i></a></li>
  <li><a href="#"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#"><i class="icon-weibo"></i></a></li>
  <li><a href="#"><i class="icon-youtube"></i></a></li>
  <li><a href="#"><i class="icon-bitcoin"></i></a></li>
</ul>

Complex socials - jump animation, with colored background

Add pi-colored-bg, pi-jump and pi-jump-bg class to social links list, to make them have jump animation, with colored background.

<ul class="pi-social-icons pi-jump pi-jump-bg pi-colored-bg">
  <li><a href="#"><i class="icon-rss"></i></a></li>
  <li><a href="#"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#"><i class="icon-weibo"></i></a></li>
  <li><a href="#"><i class="icon-youtube"></i></a></li>
  <li><a href="#"><i class="icon-bitcoin"></i></a></li>
</ul>

Complex socials - jump animation, with colored activated backgrounds

Add pi-active-bg, pi-colored-bg, pi-jump and pi-jump-bg class to social links list, to make them have jump animation, with colored background, activated backgrounds.

<ul class="pi-social-icons pi-jump pi-jump-bg pi-colored-bg pi-active-bg">
  <li><a href="#"><i class="icon-rss"></i></a></li>
  <li><a href="#"><i class="icon-stackoverflow"></i></a></li>
  <li><a href="#"><i class="icon-weibo"></i></a></li>
  <li><a href="#"><i class="icon-youtube"></i></a></li>
  <li><a href="#"><i class="icon-bitcoin"></i></a></li>
</ul>