Tad 教材網 - 線上書籍

:::

Groundwork CSS
==============

###  圖示用法

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





```

###  社群圖示

- 社群圖示是彩色的圖示
- 圖示放在<a>的class裡面
- 亦可放在、<h1>~<h6>中，如此會隨字大小變化。
- 中圖示加 medium
- 大圖示加 large
- 圓形圖示加 round
 
 ```
<pre class="brush:xml;">
<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>
```

###  完整社群圖示

```
<pre class="brush:php;">
<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>
```

:::