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-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;
}

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