基本のアイコン
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>にクラスを設定するとリンクがアイコンになる- サイズ設定や形設定、装飾と合わせて使用可能
