基本のアイコン
SNS設定用クラス一覧
ic-twitter | |
ic-facebook | |
ic-instagram | |
ic-marshmallow | |
ic-pixiv | |
ic-privatter | |
ic-privatter-bg | |
ic-web |
アイコン表示
<span class="ic-sns ic-twitter"></span>
class
にic-sns
と、それぞれのSNS設定用クラスを設定すると、アイコンが表示される- SNS設定用のクラスは上記一覧を確認
サイズ
サイズ設定用クラス一覧
ic-sm | |
通常サイズは指定なし | |
ic-lg | |
ic-xl |
通常サイズ
<span class="ic-sns ic-twitter"></span>
- サイズを指定しない場合は、通常サイズのアイコンを表示
その他のサイズ
<span class="ic-sns ic-sm ic-twitter"></span>
class
にサイズ設定用クラスを設定すると、他のサイズのアイコンを表示- サイズ設定用クラスは上記一覧を確認
形
※サンプルは形がわかりやすいよう、枠線を設定しています
形設定用クラス一覧
四角形は指定なし | |
ic-rounded | |
ic-circle |
四角形
<span class="ic-sns ic-twitter"></span>
- 形を指定しない場合は、四角形のアイコンを表示
その他の形
<span class="ic-sns ic-rounded ic-twitter"></span>
class
に形設定用クラスを設定すると、形が変わる- 形設定用クラスは上記一覧を確認
枠線
<span class="ic-sns ic-border ic-twitter"></span>
class
にic-border
を設定すると、枠線が表示される- サイズ設定や形設定、リンクと合わせて使用可能
その他の装飾
装飾設定用クラス一覧
ic-shadow | |
ic-btn |
装飾設定
<span class="ic-sns ic-shadow ic-twitter"></span>
class
に装飾設定用クラスを設定すると、装飾が表示るic-btn
はic-border
と一緒に設定すると、ロゴに合わせて影の色が変わるic-shadow
とic-btn
は同時に設定不可
<a href="#" class="ic-sns ic-btn ic-twitter"></a>
- ボタンはリンクに使用するとポチポチ動く
リンク
<a href="#" class="ic-sns ic-twitter"></a>
<a>
にクラスを設定するとリンクがアイコンになる- サイズ設定や形設定、装飾と合わせて使用可能