国産サービス対応のアイコンフォント『Ligature Symbols』を実装してみた。

どーも＠PNRAです！

アイコンフォントに関するTipsです。
普段は汎用性の高いFont Awesomeを利用させていただいています。なんといってもフォント数が豊富なのとコンポーネントが豊富なのが魅力です！がしかし、海外のアイコンフォントの場合どうしても国内のサービスに関するアイコンフォントまでは取り揃えてはいません。そこで、今日は国産のアイコンフォントである『Ligature Symbols』を実装していきたいと思います。はてぶやLINE、cookpadにmobage、gree、paperboyまでと国内大手の主要なサービスは揃っているのではないでしょうか？かなり親切なラインナップです。

実装までの手順

『Ligature Symbols』を実装するには、公式サイトからZIPファイルをダウンロードして、自身のサーバーにアップロードします。

アップロードが完了したら、HTMLとCSSを以下のように記述します。CSSで任意のウェブフォントをクラス指定し、HTMLの要素に指定すれば実装が完了です。

HTML

<!-- ウェブフォントを実装する -->

<p href="#" class="lsf-icon amazon">Amazon</p>

<a href="#" class="lsf-icon amazon">Amazon</a>

CSS

/*! 格納したウェブフォントを読み込む */

@font-face {

    font-family: 'LigatureSymbols';

    src: url('../font/LigatureSymbols-2.11.eot');

    src: url('../font/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),

         url('../font/LigatureSymbols-2.11.woff') format('woff'),

         url('../font/LigatureSymbols-2.11.ttf') format('truetype'),

         url('../font/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');

    src: url('../font/LigatureSymbols-2.11.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}

/*! lsf-iconクラスの疑似要素:beforeにfont-family:'LigatureSymbols'を適用する */

.lsf-icon:before {

  font-family: 'LigatureSymbols';

  -webkit-text-rendering: optimizeLegibility;

  -moz-text-rendering: optimizeLegibility;

  -ms-text-rendering: optimizeLegibility;

  -o-text-rendering: optimizeLegibility;

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;

  -moz-font-smoothing: antialiased;

  -ms-font-smoothing: antialiased;

  -o-font-smoothing: antialiased;

  font-smoothing: antialiased;

}

/*! lsf-iconクラス同階層にクラスを指定した時に:beforeにcontent要素を追加する。 */

.lsf-icon.amazon:before {//content内は公式サイトよりUnicodeを取得

  content: '\E007';

}