SNS Icon

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

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

アイコン・ロゴについて

アイコンはIcoMoonと、espaceオリジナルアイコンを利用して作成しています。
アイコンのライセンスはGPL / CC BY 4.0に基づきます。

アイコン制作	アイコン
IcoMoon	`link`, `clip`
espaceオリジナルアイコン	`web`, `earth`, `heart`, `star`, `text`, `mail`, `comment`, `home`, `file`, `pencil`, `book`, `image`, `human`, `clap`

ブランドロゴはブランドサイト、またはIcoMoonからお借りしています。

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

また、以下のサービスロゴについては、各ガイドラインを確認したうえでespaceにて追加したものです。

<head>~</head>の間で「icon-sns.css」を読み込みんでください
（href内のパスは環境に合わせて変更してください不安な場合は、http://から始まる絶対パスで指定してください）

<link rel="stylesheet" href="icon-sns/icon-sns.css">

ダウンロードファイル内に含まれる「icon-sns-lite.css」は軽量版ファイルです。

	通常版	軽量版
画像タイプ	svg	png(透過)

icon-sns.cssの代わりにicon-sns-lite.cssを使用すると、png画像を使用した軽量版を適応します。

軽量版のデータを使用する場合、同梱の「icon.png」が必要です。

icon-sns-lite.cssとicon.pngを異なるディレクトリに配置する場合は、icon-sns-lite.css内のicon.pngのパスを変更してください。

軽量版はローカル環境下や一部環境で、CORSエラーが原因でアイコンが表示されない場合があります。
ローカル環境下のみ表示されない場合はFirefoxでしたら表示されますので、テストでFirefoxをお使いください。
本番環境下でも表示されない場合は、通常版をご使用ください。

このデザインでは以下のカスタムプロパティを変更することでデザインの変更が可能です。

2020.09.10
公開・配布開始
2020.10.23
アイコン追加
- web
2020.11.16
以下4件の修正
- すべてのアイコンの余白とサイズを変更
- youtubeアイコンを削除
- instagramアイコン色変更
- facebookアイコン変更
2020.11.17
アイコン追加
- pixiv
2022.04.15
アイコン追加
- privatter
2022.10.17
仕様変更と追加
- CSSファイルのみで実装可能なように仕様変更
- 汎用アイコン5種（earth, link, clip, heart, star）追加
- 追加テキストレイアウト追加
- アイコン無しのレイアウト追加
- アイコン設置エリア追加
2022.11.30
仕様変更と追加
- 汎用アイコン9種（text, mail, comment, home, file, pencil, book, image, human）追加
- 軽量版追加
2022.12.07
アイコンの追加と変更
- 汎用アイコン1種（clap）追加
- 汎用アイコン2種（home, file）をオリジナルアイコンに変更
2023.01.13
仕様変更
- カスタムプロパティの追加
- 色設定がしやすい仕様に変更
2023.02.08
アイコン追加
- mastodon
2023.05.19
アイコン追加
- misskey

次のページにドキュメントをご用意しています。