SNS Icon

parts

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

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

アイコン・ロゴについて

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

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

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

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

サービス名ガイドライン
マシュマロロゴ画像の利用について
pixivガイドライン
Privatter直接ご連絡し、ロゴ画像をご提供いただきました

アイコン一覧

汎用アイコン

ブランドロゴ

設置方法

  1. <head>~</head>の間で「icon-sns.css」を読み込みんでください
    href内のパスは環境に合わせて変更してください 不安な場合は、http://から始まる絶対パスで指定してください)
<link rel="stylesheet" href="icon-sns/icon-sns.css">
  1. ドキュメント(2ページ目にあります)に沿って、HTMLファイル内に記述してください
  2. サーバーにアップロードする場合は、不要なファイルを削除してください

軽量版について

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

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

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

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

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

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

サイトのデザインに合わせて設定する

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

カスタムプロパティ概要初期値
--eic-animationアニメーションの時間0.3s
--eic-basic-color汎用アイコンの色#555
--eic-text-colorテキストの色#333
--eic-shadow-colorデフォルトの影色rgba(0, 0, 0, 0.2)

更新履歴

  • 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
    仕様変更
    • カスタムプロパティの追加
    • 色設定がしやすい仕様に変更

ドキュメント

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

タイトルとURLをコピーしました