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

最近流行りの「アウトラインアイコン」。
いい感じのものを探していたのですが、デザイン系のフリー素材はどうしても海外のものが多く、「はてブ」や「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）も同封しました。

ダウンロード

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