画像を作り直さなくてもリサイズ、カラーの変更、エフェクトの追加など自由自在なシンボルフォントは、もはやWebデザインには欠かせない存在です。
特に Font Awesome は有名で、このブログでベースとなっているテーマ「STINGER PLUS+」でも採用されているため、特別な準備を施さなくてもすぐに使うことができます。
しかし、いかんせん外国産の Web フォント。はてなブックマークや LINE 、クックパッドなど収録されていないアイコンも多くあります。
そこで便利なのが純国産のフォントセット「Ligature Symbols」。
たとえば本ブログの SNS シェアボタンはふたつのアイコンフォントを使って実装されています(追記:2016年12月のリデザインで廃止しました)。
WordPressでの「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つのファイルをアップロードします。

ファイルの読み込みを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 でもほぼ同じ方法でアイコンを表示させることができます。
表示できるアイコンの一覧は配布ページで確認してください。
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 から完全に乗り換えてしまうことも可能です。