• かちびと.net

    商用でも無料の、合字を利用してアイコンを実装するWebフォント・MONO SOCIAL ICONS FONTのご紹介です。ライセンスはOFLです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

商用でも無料の、合字を利用してアイコンを実装するWebフォント・MONO SOCIAL ICONS FONT

スポンサーリンク

合字を利用してアイコンを表現できる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に指定し、見た目を整えます。

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

<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

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services