はてブもある国産アイコンフォント「Ligature Symbols」の使い方

WordPress

Posted  Updated 

画像を作り直さなくてもリサイズ、カラーの変更、エフェクトの追加など自由自在なシンボルフォントは、もはやWebデザインには欠かせない存在です。

特に Font Awesome は有名で、このブログでベースとなっているテーマ「STINGER PLUS+」でも採用されているため、特別な準備を施さなくてもすぐに使うことができます。
しかし、いかんせん外国産の Web フォント。はてなブックマークや LINE 、クックパッドなど収録されていないアイコンも多くあります。

そこで便利なのが純国産のフォントセット「Ligature Symbols」。

たとえば本ブログの SNS シェアボタンはふたつのアイコンフォントを使って実装されています(追記:2016年12月のリデザインで廃止しました)。

WordPressでの「Ligature Symbols」の使い方を解説していきます。

Ligature Symbols

なお、本エントリーはバージョン2.11をもとに執筆しています。バージョンアップによってコードが変更される可能性があるため、利用前に配布サイトで確認をお願いします。

導入

Font Awesomeと違い CDN での利用はできないので、自分のサーバにフォントファイルをアップロードする必要があります。

ファイルの準備

Ligature Symbols のトップページ下部にあるリンクからダウンロードします。

  • LigatureSymbols-2.11.eot
  • LigatureSymbols-2.11.otf
  • LigatureSymbols-2.11.svg
  • LigatureSymbols-2.11.ttf
  • LigatureSymbols-2.11.woff

zip ファイルを解凍するといくつかのファイルが入っていますが、必要なものは上記の5つのみ。
「2.11」の部分は別のバージョンであれば違う数字が入ります。

ファイルのアップロード

ここでは子テーマのサブディレクトリにフォントファイルをアップロードすることとします。

テーマディレクトリ内に「fonts」というディレクトリを新たに作成し、この中に前項の5つのファイルをアップロードします。

FileZilaスクリーンショット
子テーマ内に「fonts」ディレクトリを作成した例

ファイルの読み込みをCSSに追記

配布サイトに記載の読み込み用CSSを子テーマのstyle.cssに追記します。

/* Ligature Symbols */

@font-face {
    font-family: 'LigatureSymbols';
    src: url('./fonts/LigatureSymbols-2.11.eot');
    src: url('./fonts/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('./fonts/LigatureSymbols-2.11.woff') format('woff'),
         url('./fonts/LigatureSymbols-2.11.ttf') format('truetype'),
         url('./fonts/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('./fonts/LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.lsf, .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:attr(title);
  margin-right:0.3em;
  font-size:130%;
}

5~10行目のフォントファイルのパスは、あくまで例のとおり子テーマ内に「fonts」というサブディレクトリを作りそこにアップロードした場合です。
他のところにアップロードしたり、別のディレクトリ名をにしていた場合はこの限りではありません。

Ligature Symbols を使うための準備は以上で完了です。

使用方法

Font Awesome では使いたいアイコンのページで表示されるHTMLをコピペする方法、また CSS で Unicode を指定する方法がありますが、Ligature Symbols でもほぼ同じ方法でアイコンを表示させることができます。
表示できるアイコンの一覧は配布ページで確認してください。

Ligature Symbols

HTMLでアイコンを指定する

文字列の冒頭に表示させたい場合、以下のようにHTMLを記述します。

<span class="lsf">wordpress ワードプレス</span>

クラス.lsfをつけると中の文字列(ここでは「wordpress」)がそのままアイコンの指定になり、空要素にならずに済みます。

また、要素内に記述するのではなくtitle属性でアイコンを指定しても同じ表示ができます。クラス名に-iconが加わっているので注意してください。

<span class="lsf-icon" title="wordpress">ワードプレス</span>

便宜上 span タグとしていますが、p でも Font Awesome のように i でも構いません。

CSSでアイコンを指定する

リストの先頭にアイコンを表示させたい場合などに利用します。

.lsf-icon.wordpress:before {
  content: 'E171';
}

lsf-iconとアイコン名であるwordpressを組み合わせたクラスを HTML でつけた場合です。
このページの SNS シェアボタンではこの疑似クラスを使った記述をしています。


個人的には Feedly のアイコンが欲しかったのですが、まだ未収録なのが惜しいところ。が、日本語環境に対応しているのは汎用的でいいのではないかと。

大体のアイコンは収録されていますので、Font Awesome から完全に乗り換えてしまうことも可能です。