にゅーてみ

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

time 2015/06/11

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

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

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

sponsored link

Ligature Symbolsの使い方

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

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

mail

mail

heart

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

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

Twitter

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

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

CSSの記述

HTMLの記述

Amazon

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

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

ligature2

と書けばOKです。

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

sponsored link

down

コメントする




PC

スマホ・タブレット

ウェアラブル

ゲーム

wordpress

その他



sponsored link

QR Code Business Card