cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import"
      href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="social-nav" noscript>
  <template>
    <div class="social-icons" data-type="{{iconType}}" data-shadow="{{iconShadow}}">
      <a class="twitter" href="{{twitter}}"><i>Twitter</i></a>
      <a class="facebook" href="{{facebook}}"><i>Facebook</i></a>
      <a class="google-plus" href="{{googlePlus}}"><i>Google+</i></a>
      <a class="linked-in" href="{{linkedIn}}"><i>LinkedIn</i></a>
      <a class="github" href="{{github}}"><i>GitHub</i></a>
      <a class="pinterest" href="{{pinterest}}"><i>Pinterest</i></a>
      <a class="instagram" href="{{instagram}}"><i>Instagram</i></a>
    </div>
  </template>
  <style>
  social-nav::shadow .social-icons {
    margin: 1em;
  }
  social-nav::shadow .social-icons a {
    font-family: "FontAwesome";
    position: relative;
    padding: 0 0 0 1em;
    font-size: 3em;
    margin: 0 .1em 0 0;
  }
  social-nav::shadow .social-icons a i {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
  }
  social-nav::shadow .social-icons a:after {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 75%;
  }
  social-nav::shadow .social-icons a.twitter {
    color: #45b0e3;
    background: #45b0e3;
  }
  social-nav::shadow .social-icons a.twitter:after {
    content: '\f099';
    top: .2em;
    left: .2em;
    color: #fff;
  }
  social-nav::shadow .social-icons a.facebook {
    color: #39599f;
    background: #39599f;
  }
  social-nav::shadow .social-icons a.facebook:after {
    top: .2em;
    left: .44em;
    content: '\f09a';
    color: #fff;
  }
  social-nav::shadow .social-icons a.google-plus {
    color: #dd4b39;
    background: #dd4b39;
  }
  social-nav::shadow .social-icons a.google-plus:after {
    top: .2em;
    left: .3em;
    content: '\f0d5';
    font-size: 70%;
    color: #fff;
  }
  social-nav::shadow .social-icons a.linked-in {
    color: #1883bc;
    background: #1883bc;
  }
  social-nav::shadow .social-icons a.linked-in:after {
    top: .2em;
    left: .3em;
    content: '\f0e1';
    font-size: 70%;
    color: #fff;
  }
  social-nav::shadow .social-icons a.github {
    color: #555555;
    background: #555555;
  }
  social-nav::shadow .social-icons a.github:after {
    top: .24em;
    left: .3em;
    content: '\f09b';
    font-size: 70%;
    color: #fff;
  }
  social-nav::shadow .social-icons a.pinterest {
    color: #cb2028;
    background: #cb2028;
  }
  social-nav::shadow .social-icons a.pinterest:after {
    top: .2em;
    left: .3em;
    content: '\f0d2';
    font-size: 70%;
    color: #fff;
  }
  social-nav::shadow .social-icons a.instagram {
    color: #614236;
    background: #614236;
  }
  social-nav::shadow .social-icons a.instagram:after {
    top: .3em;
    left: .33em;
    content: '\f16d';
    font-size: 65%;
    color: #fff;
  }
  social-nav::shadow .social-icons a:hover.twitter {
    background: #209bd5;
  }
  social-nav::shadow .social-icons a:hover.facebook {
    background: #2c4479;
  }
  social-nav::shadow .social-icons a:hover.google-plus {
    background: #c23321;
  }
  social-nav::shadow .social-icons a:hover.linked-in {
    background: #12638f;
  }
  social-nav::shadow .social-icons a:hover.github {
    background: #3b3b3b;
  }
  social-nav::shadow .social-icons a:hover.pinterest {
    background: #9f191f;
  }
  social-nav::shadow .social-icons a:hover.instagram {
    background: #402c24;
  }
  social-nav::shadow .social-icons[data-type="rounded"] a {
    border-radius: 20em;
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.twitter {
    background: linear-gradient(#45b0e3, #197aa9);
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.twitter:hover {
    background: #45b0e3;
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.facebook {
    background: linear-gradient(#39599f, #1e2f54);
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.facebook:hover {
    background: #39599f;
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.google-plus {
    background: linear-gradient(#dd4b39, #96271a);
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.google-plus:hover {
    background: #dd4b39;
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.linked-in {
    background: linear-gradient(#1883bc, #0c4462);
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.linked-in:hover {
    background: #1883bc;
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.github {
    background: linear-gradient(#555555, #222222);
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.github:hover {
    background: #555555;
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.pinterest {
    background: linear-gradient(#cb2028, #731217);
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.pinterest:hover {
    background: #cb2028;
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.instagram {
    background: linear-gradient(#614236, #1f1512);
  }
  social-nav::shadow .social-icons[data-gradient="linear"] a.instagram:hover {
    background: #614236;
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.twitter {
    background: radial-gradient(#45b0e3, #197aa9);
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.twitter:hover {
    background: #45b0e3;
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.facebook {
    background: radial-gradient(#39599f, #1e2f54);
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.facebook:hover {
    background: #39599f;
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.google-plus {
    background: radial-gradient(#dd4b39, #96271a);
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.google-plus:hover {
    background: #dd4b39;
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.linked-in {
    background: radial-gradient(#1883bc, #0c4462);
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.linked-in:hover {
    background: #1883bc;
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.github {
    background: radial-gradient(#555555, #222222);
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.github:hover {
    background: #555555;
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.pinterest {
    background: radial-gradient(#cb2028, #731217);
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.pinterest:hover {
    background: #cb2028;
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.instagram {
    background: radial-gradient(#614236, #1f1512);
  }
  social-nav::shadow .social-icons[data-gradient="radial"] a.instagram:hover {
    background: #614236;
  }
  social-nav::shadow .social-icons[data-shadow="true"] a.twitter {
    box-shadow: 1px 1px 1px #0c3a50;
  }
  social-nav::shadow .social-icons[data-shadow="true"] a.facebook {
    box-shadow: 1px 1px 1px #030509;
  }
  social-nav::shadow .social-icons[data-shadow="true"] a.google-plus {
    box-shadow: 1px 1px 1px #3f110b;
  }
  social-nav::shadow .social-icons[data-shadow="true"] a.linked-in {
    box-shadow: 1px 1px 1px #010507;
  }
  social-nav::shadow .social-icons[data-shadow="true"] a.github {
    box-shadow: 1px 1px 1px black;
  }
  social-nav::shadow .social-icons[data-shadow="true"] a.pinterest {
    box-shadow: 1px 1px 1px #1b0405;
  }
  social-nav::shadow .social-icons[data-shadow="true"] a.instagram {
    box-shadow: 1px 1px 1px black;
  }
  </style>
  
  <script>
  	Polymer('social-nav', {
      twitter: "#",
      facebook: "#",
      googlePlus: "#",
      linkedIn: "#",
      github: "#",
      pinterest: "#",
      instagram: "#",
      iconType: "rounded", // rounded,square
      iconShadow: "true",
      iconGradient: "radial" // radial,linear
    });
  </script>
  
</polymer-element>

  
<social-nav></social-nav>
            
          
!
            
              @import url('https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css');
            
          
!
999px
Loading ..................

Console