8. 圖示 Social Icons

圖示用法

• 完整圖示：http://groundwork.sidereel.com/?url=icons
• 圖示是黑白的
• 圖示放在<i>的class裡面
• 要放大則在class加上icon-2x~4x
• 要讓圖示旋轉則加上icon-spin

<i class="icon-twitter"></i>
<i class="icon-circle-arrow-left icon-2x"></i>
<i class="icon-facetime-video icon-3x"></i>
<i class="icon-github-alt icon-4x"></i>
<i class="icon-spinner icon-2x icon-spin"></i>

社群圖示

• 社群圖示是彩色的圖示
• 圖示放在<a>的class裡面
• 亦可放在<p>、<h1>~<h6>中，如此會隨字大小變化。
• 中圖示加 medium
• 大圖示加 large
• 圓形圖示加 round

<a href="#" class="social-icon facebook">小圖示</a>
<a href="#" class="medium social-icon facebook">中圖示</a>
<a href="#" class="large social-icon facebook">大圖示</a>
<a href="#" class="large round social-icon facebook">圓形圖示</a>

完整社群圖示

<a data-title=".social-icon.behance.small" role="tooltip" class="social-icon behance small tooltip" href="#">Behance</a>
<a data-title=".social-icon.creativecloud.small" role="tooltip" class="social-icon creativecloud small tooltip" href="#">Creative Cloud</a>
<a data-title=".social-icon.dribbble.small" role="tooltip" class="social-icon dribbble small tooltip" href="#">Dribbble</a>
<a data-title=".social-icon.dropbox.small" role="tooltip" class="social-icon dropbox small tooltip" href="#">Dropbox</a>
<a data-title=".social-icon.evernote.small" role="tooltip" class="social-icon evernote small tooltip" href="#">Evernote</a>
<a data-title=".social-icon.facebook.small" role="tooltip" class="social-icon facebook small tooltip" href="#">Facebook</a>
<a data-title=".social-icon.flickr.small" role="tooltip" class="social-icon flickr small tooltip" href="#">Flickr</a>
<a data-title=".social-icon.github.small" role="tooltip" class="social-icon github small tooltip" href="#">Github</a>
<a data-title=".social-icon.googleplus.small" role="tooltip" class="social-icon googleplus small tooltip" href="#">GooglePlus</a>
<a data-title=".social-icon.icloud.small" role="tooltip" class="social-icon icloud small tooltip" href="#">iCloud</a>
<a data-title=".social-icon.linkedin.small" role="tooltip" class="social-icon linkedin small tooltip" href="#">LinkedIn</a>
<a data-title=".social-icon.mail.small" role="tooltip" class="social-icon mail small tooltip" href="#">Mail</a>
<a data-title=".social-icon.msn.small" role="tooltip" class="social-icon msn small tooltip" href="#">MSN</a>
<a data-title=".social-icon.pinterest.small" role="tooltip" class="social-icon pinterest small tooltip" href="#">Pinterest</a>
<a data-title=".social-icon.rdio.small" role="tooltip" class="social-icon rdio small tooltip" href="#">Rdio</a>
<a data-title=".social-icon.rss.small" role="tooltip" class="social-icon rss small tooltip" href="#">RSS</a>
<a data-title=".social-icon.skitch.small" role="tooltip" class="social-icon skitch small tooltip" href="#">Skitch</a>
<a data-title=".social-icon.skype.small" role="tooltip" class="social-icon skype small tooltip" href="#">Skype</a>
<a data-title=".social-icon.spotify.small" role="tooltip" class="social-icon spotify small tooltip" href="#">Spotify</a>
<a data-title=".social-icon.stumbleupon.small" role="tooltip" class="social-icon stumbleupon small tooltip" href="#">StumbleUpon!</a>
<a data-title=".social-icon.twitter.small" role="tooltip" class="social-icon twitter small tooltip" href="#">Twitter</a>
<a data-title=".social-icon.vimeo.small" role="tooltip" class="social-icon vimeo small tooltip" href="#">Vimeo</a>
<a data-title=".social-icon.youtube.small" role="tooltip" class="social-icon youtube small tooltip" href="#">YouTube</a>
<a data-title=".social-icon.youversion.small" role="tooltip" class="social-icon youversion small tooltip" href="#">YouVersion</a>
<a data-title=".social-icon.zerply.small" role="tooltip" class="social-icon zerply small tooltip" href="#">Zerply</a>
<a data-title=".social-icon.pocket.small" role="tooltip" class="social-icon pocket small tooltip" href="#">Pocket App</a>