読者です 読者をやめる 読者になる 読者になる

P N R A

東京都中野区に所在を構えるウェブ制作会社PNRA DESIGN OFFICE

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

Ligature-Symbols

どーも、中野区でホームページ制作やってます。@PNRAです!

アイコンフォントに関するTipsです。
普段は汎用性の高いFont Awesomeを利用させていただいています。なんといってもフォント数が豊富なのとコンポーネントが豊富なのが魅力です!がしかし、海外のアイコンフォントの場合どうしても国内のサービスに関するアイコンフォントまでは取り揃えてはいません。そこで、今日は国産のアイコンフォントである『Ligature Symbols』を実装していきたいと思います。はてぶやLINE、cookpadmobagegree、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';
}

これで実装は完了です。

実際に書き出してみると、

っていいたいんですが、はてぶにフォントアイコンを対応させる方法を僕は知りません。
むしろ教えてください。(笑)

クラスの指定は、任意の名前をつけたクラスに:before,:afterを配し、公式サイトの一覧からUnicodeを選んで、 { content:'\xxx'; }のxxx内に記載するだけなので、必要に応じて追加しましょう。

『Ligature Symbols』はこちらよりダウンロードが可能です。

リンク:Ligature Symbols

Siyabonga ekufundeni kwakho.(訳:最後まで読んでくれてありがとう。 / 注:ズールー語)