SNS Icon

parts

基本のアイコン

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>
  • classic-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>
  • classic-borderを設定すると、枠線が表示される
  • サイズ設定や形設定、リンクと合わせて使用可能

その他の装飾

装飾設定用クラス一覧

ic-shadow
ic-btn

装飾設定

<span class="ic-sns ic-shadow ic-twitter"></span>
  • class装飾設定用クラスを設定すると、装飾が表示る
  • ic-btnic-borderと一緒に設定すると、ロゴに合わせて影の色が変わる
  • ic-shadowic-btnは同時に設定不可

<a href="#" class="ic-sns ic-btn ic-twitter"></a>
  • ボタンはリンクに使用するとポチポチ動く

リンク

<a href="#" class="ic-sns ic-twitter"></a>
  • <a>にクラスを設定するとリンクがアイコンになる
  • サイズ設定や形設定、装飾と合わせて使用可能
タイトルとURLをコピーしました