SNS Icon

基本のアイコン

アイコン設定用クラス一覧

汎用アイコン

	ic-web
	ic-earth
	ic-link
	ic-clip
	ic-heart
	ic-star
	ic-text
	ic-mail
	ic-comment
	ic-home
	ic-file
	ic-pencil
	ic-book
	ic-image
	ic-human
	ic-clap

ブランドアイコン

	ic-twitter
	ic-mastodon
	ic-misskey
	ic-facebook
	ic-facebook-bg
	ic-instagram
	ic-marshmallow
	ic-pixiv
	ic-pixiv-bg
	ic-privatter
	ic-privatter-bg

アイコン表示

<span class="ic-sns ic-twitter"></span>

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

追加テキスト

<span class="ic-sns ic-twitter" data-text="テキスト"></span>

• data-text="テキスト"を設定すると、アイコンの横に設定したテキストをレイアウトします
• 通常のアイコンと同様の方法で装飾が可能です

テキストのみレイアウト

テキスト テキスト テキスト

<span class="ic-sns ic-none">テキスト</span>

• <span>テキスト</span>または<a>テキスト</a>にic-snsと一緒にic-noneを設定すると、通常のアイコンと並べて違和感のないようにレイアウトします
• 通常のアイコンと同様の方法で装飾が可能です

アイコン設置エリア

<div class="ic-sns-area ic-sns-area-lg ic-sns-area-center">
    <span class="ic-sns ic-twitter"></span>
    <span class="ic-sns ~ 省略 ~"></span>
    <span class="ic-sns ~ 省略 ~"></span>
    <span class="ic-sns ~ 省略 ~"></span>
    <span class="ic-sns ~ 省略 ~"></span>
</div>

• class="ic-sns-area"を設定した要素でアイコンを囲むと、アイコンの間隔をレイアウトします
• ic-sns-areaと一緒に間隔設定クラス（ic-sns-area-sm, ic-sns-area-lg, ic-sns-area-xl）を設定すると、間隔の大きさが変更できます。設定されていない場合は、デフォルトの設定を反映します
• ic-sns-areaと一緒にic-sns-area-centerを設定すると、中央寄せにします

汎用アイコンの色変更

一括変更

汎用アイコンすべての色を変更する場合は、カスタムプロパティ「--eic-basic-color」を変更してください。

個別に変更

CSSファイル内に以下のような記述があります。

コメントで「色設定」「汎用アイコン」などのキーワードを記載しておりますので、目印にしてください。

/* ▼ ----- 色設定 ----- ▼ */
/* ▼ 汎用アイコン ▼ */
/* none */
.ic-sns.ic-none::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-none.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-none.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-none:hover {
  background: var(--eic-basic-color);
}

// ~ 省略 ~
/* ▲ ----- 色設定 ----- ▲ */

変更したいアイコンのカラー設定をカスタムプロパティからカラーコード等に変更してください。

以下の例ではアイコン無しのレイアウトを赤色(■#ff0000)に変更しています

/* ▼ ----- 色設定 ----- ▼ */
/* ▼ 汎用アイコン ▼ */
/* none */
.ic-sns.ic-none::before {
  background: #ff0000;
}
.ic-sns.ic-none.ic-border {
  border-color: #ff0000;
}
.ic-sns.ic-none.ic-border.ic-btn {
  box-shadow: 0 3px #ff0000;
}
a.ic-sns:not(.ic-btn).ic-none:hover {
  background: #ff0000;
}

// ~ 省略 ~
/* ▲ ----- 色設定 ----- ▲ */