合字を利用してアイコンを表現できるWebフォント・MONO SOCIAL ICONS FONTのご紹介です。Open Font License(OFL)なので商用でも無料で利用する事が出来ます。

合字とCSSを利用して、特定の文字列でアイコンを表示させます。

MONO SOCIAL ICONS FONT

サークル状やスクエアタイプも用意されています。CSSのtext-renderingやfont-smoothingを利用し、特定の文字列でアイコンを表示させるようにしてあるみたい。

@font-face {
    font-family: 'Mono Social Icons Font';
    src: url('MonoSocialIconsFont-1.00.eot');
    src: url('MonoSocialIconsFont-1.00.eot?#iefix') format('embedded-opentype'),
         url('MonoSocialIconsFont-1.00.woff') format('woff'),
         url('MonoSocialIconsFont-1.00.ttf') format('truetype'),
         url('MonoSocialIconsFont-1.00.svg#MonoSocialIconsFont') format('svg');
    src: url('MonoSocialIconsFont-1.00.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Webフォントを読み込み。

.symbol, a.symbol:before {
    font-family: 'Mono Social Icons Font';
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

text-renderingプロパティをoptimizeLegibilityに指定して合字を調整、font-smoothingプロパティをantialiasedに指定し、見た目を整えます。

両プロパティの詳細は以下でご確認下さい。

[note]The ‘text-rendering’ property
Font smoothing: the ‘font-smooth’ property[/note]

<p>Amazon : <span class='symbol'>amazon</span></p>
<p>Amazon : <span class='symbol'>&amp;#xe003;</span></p>

例えばAmazonのアイコンを表示させるなら、HTMLマークアップは上記のようにclassを与えてamazonと書けば、合字としてアイコンが表示されます。

まだ導入するには問題のある方法ではありますけど、こういう方法もあるにはあるので覚えておいて損は無いなぁと思った次第です。フォントのライセンスはOFLとなっています。

MONO SOCIAL ICONS FONT