アイコンフォントLigature Symbolsの使い方

テーマ・マテリアルでは標準でLigature Symbolsというアイコンフォントが設定されています。

クラス属性でlsf-iconを追加すればどこにでも表示できますよ。
クラス属性とセットでtitle属性を入れて、そこにフォントの指定をします。
フォントの名前は上記サイトにアイコン毎に書いてありますので参照してください。

Ligature Symbolsの使い方

アイコンを単体で使う場合

スタイルシートで色や大きさも設定できます。

アイコンを単体で使う場合
<a class="lsf" href="mailto:mail@example.com">アイコン名</a>
<p class="lsf">アイコン名</a></p>
<span class="lsf">アイコン名</span>

mail

mail

heart

リンクの前にアイコンを付ける場合

cssでlsf-iconにbefore属性が付いていますので、指定した場所の前につきます。

<a class="lsf-icon" title="twitter" href="http://twitter.com/">Twitter</a>

Twitter

特定のアイコンをCSSに記述して使う場合

個別にCSSを設定する場合はunicodeを使って設定できます。

CSSの記述

.lsf-icon.amazon:before {
  content: '\E007'; /*unicodeを使う*/
}

HTMLの記述

<a class="lsf-icon amazon" href="http://amazon.com/">Amazon</a>

Amazon

メニューにアイコンフォントを付ける方法

管理画面→外観→メニューからナビゲーションラベルを書き換えます。

<span class="lsf-icon" title="アイコン名">リンク文字</span>

と書けばOKです。

lsf-iconのclassは初期状態で書かれているCSSですので、個別で設定した方が良いです。
初期のままでOKであればこれでOKです。