「el plano」には「アイコンフォント」と呼ばれるものが含まれていて、簡単に表示することができます。

当ブログの記事中でも、アクセントとしてつかうことで文字ばかりのコンテンツにならないよう心がけて利用しています。

この記事では、アイコンフォントの表示方法について記載しています。

アイコンフォントの使用例

定義されたアイコンフォント名を「class」のパラメータとして指定するだけで表示することができます。

DigiPressユーザーの方は、使用できるアイコンフォントの一覧を確認することができます。

フォントマップ表示可能なアイコンフォント一覧 | DigiPress

See the Pen oQqgMw by KAZUYOSHI KATANO (@k144) on CodePen.

お知らせ | DigiPress

See the Pen NEYqXq by KAZUYOSHI KATANO (@k144) on CodePen.

リリースノート

See the Pen aQYOYq by KAZUYOSHI KATANO (@k144) on CodePen.

「el plano」バージョンナンバーの確認

See the Pen gQebjK by KAZUYOSHI KATANO (@k144) on CodePen.

Webフォントとは、オンライン上にあるフォントデータをCSSから読み込み、ブラウザでアクセスされるOSのフォントに依存することなく、どのマシンからでもあらゆるフォントを同じように用いて、そのフォントのデザインの書体を表示することができる仕組みです。

Webフォントを利用して画像を使わずにアイコンを表示 | DigiPress

 
こんな使い方もできます。
大きなサイズ指定をすれば簡素なイメージのように扱うこともできます。


画像ではないため、拡大指定しても粗くなることはなく、きれいに表示することができます。

上記の例では、
「プロモーション用コンテンツ装飾ボックス」というショートコードを併用して表示しています。

関連記事【el plano : 007】DigiPressテーマ「el plano」ショートコード、プロモーション用コンテンツ装飾ボックスがいいね！ | 気まぐれデジタル好奇心 WP
 

スマートフォン対応カスタマイズ型WordPressテーマ
「el plano」を導入検討する