スマートフォンのアイコンにはSVGフォントを使いましょう。

The icon of the smartphone's use SVG fonts.

abcdefghijklmnopqrstuvwxyz

▲▲

で、これがSVGフォントです。

さがせば、いろんなSVGフォントが出回ってるんですね…。


svgフォントの使い方はとっても簡単。

@font-face {
  font-family:'SvgFont';
  src:url('font.svg') format('svg');
}
.svgfont {
  font-family:'SvgFont';
}

こんな感じでcssで読み込みと使いたいところのclassを指定。
上のような場合は

<div class="svgfont">
abcdefghijk…
</div>

とやってあげると

<div class="svgfont">
abcdefghijk…
</div>

こんな感じになります。


アメブロで使う場合は[デザインの変更] > [CSSの編集]から

/*◆◆◆◆◆◆◆◆◆SVGフォント◆◆◆◆◆◆◆◆◆◆◆*/
@font-face {
  font-family:'WebSymbolsRegular';
  src:url('http://webmage.pro/plugin/regular-webfont.svg') format('svg');
}
.svgfont {
  font-family:'WebSymbolsRegular';
  font-size: 30px;
}

これを貼り付けてやってみてください。


f = Facebook
g = Google+
t = Twitter

結構わかりやすいですよね。


Chrome、Safariじゃない人にはなんのことやら…でしょうけど。


http://raphaeljs.com/icons/
ここでMITライセンスのSVGアイコンデータが入手出来たりします。



今回使ったのは、ここから入手しました。
http://www.justbenicestudio.com/studio/websymbols/