social

API Methods

setType

Attribute Names

data-type

Elements
    Properties
      Sizes
        SVG
        <img data-src="social.svg" class="iconic iconic-sm" alt="social">
        <img data-src="social.svg" class="iconic iconic-md" alt="social">
        <img data-src="social.svg" class="iconic iconic-lg" alt="social">
        
        Default Icon Font
        <span class="iconic iconic-sm" data-glyph="social-twitter" title="social twitter" aria-hidden="true"></span>
        <span class="iconic iconic-md" data-glyph="social-twitter" title="social twitter" aria-hidden="true"></span>
        <span class="iconic iconic-lg" data-glyph="social-twitter" title="social twitter" aria-hidden="true"></span>
        
        Bootstrap Icon Font
        <span class="iconic iconic-social-twitter iconic-sm" title="social twitter" aria-hidden="true"></span>
        <span class="iconic iconic-social-twitter iconic-md" title="social twitter" aria-hidden="true"></span>
        <span class="iconic iconic-social-twitter iconic-lg" title="social twitter" aria-hidden="true"></span>
        
        Foundation Icon Font
        <span class="fi-social-twitter iconic-sm" title="social twitter" aria-hidden="true"></span>
        <span class="fi-social-twitter iconic-md" title="social twitter" aria-hidden="true"></span>
        <span class="fi-social-twitter iconic-lg" title="social twitter" aria-hidden="true"></span>
        
        CSS

        Semantic SVG

        data-type

        Sets the social logo

        • twitter

          <img data-type="twitter" data-src="social.svg" class="iconic" alt="social" />
          
        • dribbble

          <img data-type="dribbble" data-src="social.svg" class="iconic" alt="social" />
          
        • dropbox

          <img data-type="dropbox" data-src="social.svg" class="iconic" alt="social" />
          
        • facebook

          <img data-type="facebook" data-src="social.svg" class="iconic" alt="social" />
          
        • flickr

          <img data-type="flickr" data-src="social.svg" class="iconic" alt="social" />
          
        • github

          <img data-type="github" data-src="social.svg" class="iconic" alt="social" />
          
        • instagram

          <img data-type="instagram" data-src="social.svg" class="iconic" alt="social" />
          
        • linkedin

          <img data-type="linkedin" data-src="social.svg" class="iconic" alt="social" />
          
        • pinterest

          <img data-type="pinterest" data-src="social.svg" class="iconic" alt="social" />
          
        • reddit

          <img data-type="reddit" data-src="social.svg" class="iconic" alt="social" />
          
        • tumblr

          <img data-type="tumblr" data-src="social.svg" class="iconic" alt="social" />
          
        • vimeo

          <img data-type="vimeo" data-src="social.svg" class="iconic" alt="social" />
          
        • youtube

          <img data-type="youtube" data-src="social.svg" class="iconic" alt="social" />
          
        • google-plus

          <img data-type="google-plus" data-src="social.svg" class="iconic" alt="social" />
          
        Method name

        Options/Examples

        setType(type)

        twitter
        dribbble
        dropbox
        facebook
        flickr
        github
        instagram
        linkedin
        pinterest
        reddit
        tumblr
        vimeo
        youtube
        google-plus

        Icon Font

        Iconic may be all about SVG, but it also comes with a killer font. For the full skinny, read our icon font and Bootstrap/Foundation guides.

        <!-- Default -->
        <span class="iconic" data-glyph="social-twitter" title="social twitter" aria-hidden="true"></span>
        <!-- Bootstrap -->
        <span class="iconic iconic-social-twitter" title="social twitter" aria-hidden="true"></span>
        <!-- Foundation -->
        <span class="fi-social-twitter" title="social twitter" aria-hidden="true"></span>
        
        • social-twitter

        • social-dribbble

        • social-dropbox

        • social-facebook

        • social-flickr

        • social-github

        • social-instagram

        • social-linkedin

        • social-pinterest

        • social-reddit

        • social-tumblr

        • social-vimeo

        • social-youtube

        • social-google-plus

        was copied for yah