国内SNS対応のアウトラインアイコンフォントを作りました

Published:2017.01.31Last updated:2017.02.01

最近流行りの「アウトラインアイコン」。
いい感じのものを探していたのですが、デザイン系のフリー素材はどうしても海外のものが多く、「はてブ」や「LINE」が含まれているものが見つけられませんでした。

ので、下記作りました。

Japanese Social Outline Icons

追記
思うところあって「mixi」も追加しました(ついでにちょっとサイズが小さかったのを修正しました)。

上記の「ダウンロード」からzipファイルをダウンロードできます。

以下は解説など。

SNSアイコン

  • Twitter
  • Facebook
  • Instagram
  • LINE(大・小)
  • Pocket
  • Google+
  • はてなブックマーク
  • mixi New!

海外の素材ではあまり見られない「LINE」「はてブ」を含め、主要SNSのものも一応作りました。

ファイル形式

  • .eot
  • .ttf
  • .woff
  • .svg
  • .ai
  • .fw.png(Fireworks PNG)

フォントファイル類はIcoMoonさんにお世話になりました。
CSSで下記のようにご利用ください。

@font-face {
  font-family: 'jsoi';
  src:  url('jsoi.eot');
  src:  url('jsoi.eot#iefix') format('embedded-opentype'),
    url('jsoi.ttf') format('truetype'),
    url('jsoi.woff') format('woff'),
    url('jsoi.svg#jsoi') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'jsoi' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-twitter:before {
  content: "\e900";
}

.icon-facebook:before {
  content: "\e901";
}

.icon-instagram:before {
  content: "\e902";
}

.icon-googlep:before {
  content: "\e903";
}

.icon-line:before {
  content: "\e904";
}

.icon-lines:before {
  content: "\e905";
}

.icon-pocket:before {
  content: "\e906";
}

.icon-hateb:before {
  content: "\e907";
}

あと念のためFireworks PNG(Fireworks PNG)も同封しました。

これまで作ったものを配布することがあまりなく不慣れなため、過不足あればご指摘いただけると幸いです。

利用例

当サイトと同じテンプレートを使いまわした他サイトで実際に使ってみました。

PC

アイコンフォント使用例PC

この記事の少し下にも同様のスタイルで通常のアイコンのバーが表示されているので比較するとわかりやすいかも知れません。

スマートフォン

アイコンフォント使用例SP

もともとはこのサイトで使いたくて作りました。だいたいイメージしていた通りで満足です。

アウトラインアイコンの余談

「最近インスタのアプリとかで使われてる線の細いアイコン『アウトラインアイコン』って言うんだ〜」と思っていろいろ調べていたら「シンラインアイコン」という新語を目にしました。
シンラインとは……。

ではでは。

最新の記事

お知らせ