items

SNS Icon

ホームページのデザインを崩さず、ほぼコピー&ペーストでカラフルなSNSアイコンを設置することができます。

アイコンは横に文字を並べてワンポイントにしたり、アイコン自体をリンクにしたりしてお使いいただけます。

ダウンロード

ご注意

ロゴの権利はブランドに属します。
それぞれのブランドを示す目的以外の用途では使用しないでください。

アイコンはIcoMoonを利用して作成しています。
アイコンのライセンスはGPL / CC BY 4.0に基づきます。

マシュマロのアイコンにつきましては、マシュマロのロゴ画像の利用についてを確認したうえで、espaceにて追加したものです。

設置方法

手順
  1. <head>~</head>の間でicon-sns-css.cssを読み込みんでください
    html
    <link rel="stylesheet" href="icon-sns/icon-sns-css.css">
    • href内のパスは環境に合わせて変更してください 不安な場合は、http://から始まる絶対パスで指定してください
  2. 以下のドキュメントに沿って、HTMLファイル内にアイコンのタグを記述してください

ドキュメント

基本のアイコン

SNS設定用クラス一覧

ic-twitter
ic-facebook
ic-instagram
ic-marshmallow
ic-pixiv
ic-web

アイコン表示

html
<span class="ic-sns ic-twitter"></span>
  • classic-snsと、それぞれのSNS設定用クラスを設定すると、アイコンが表示されます
  • SNS設定用のクラスは上記一覧をご確認ください

サイズ

サイズ設定用クラス一覧

ic-sm
通常サイズは指定なし
ic-lg
ic-xl

通常サイズ

html
<span class="ic-sns ic-twitter"></span>
  • サイズを指定しない場合は、通常サイズのアイコンを表示します

その他のサイズ

html
<span class="ic-sns ic-sm ic-twitter"></span>
  • classサイズ設定用クラスを設定すると、他のサイズのアイコンが表示されます
  • サイズ設定用クラスは上記一覧をご覧ください

※サンプルは形がわかりやすいよう、枠線を設定しています

形設定用クラス一覧

四角形は指定なし
ic-rounded
ic-circle

四角形

html
<span class="ic-sns ic-twitter"></span>
  • 形を指定しない場合は、四角形のアイコンを表示します

その他の形

html
<span class="ic-sns ic-rounded ic-twitter"></span>
  • classサイズ設定用クラスを設定すると、形が変わります
  • 形設定用クラスは上記一覧をご確認ください

枠線

html
<span class="ic-sns ic-border ic-twitter"></span>
  • classic-borderを設定すると、枠線が表示されます
  • サイズ設定や形設定、リンクと合わせて使用できます

その他の装飾

装飾設定用クラス一覧

ic-shadow
ic-btn

装飾設定

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

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

リンク

html
<a href="#" class="ic-sns ic-twitter"></a>
  • <a>にクラスを設定するとリンクがアイコンになります
  • サイズ設定や形設定、装飾と合わせて使用できます

更新履歴

2020/11/17
pixivアイコン追加
2020/11/16
すべてのアイコンの余白とサイズを変更youtubeアイコンを削除
Instagramアイコン色変更
facebookアイコン変更
2020/10/23
webサイトアイコン追加