Read Article

【el plano:008】DigiPressテーマ「el plano」アイコンフォントの使い方



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

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

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

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


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

DigiPressユーザーの方は、こちらから使用できるアイコンフォントの一覧を確認することができます。
フォントマップ表示可能なアイコンフォント一覧 | DigiPress

<div class="box box-blue"><span class="icon-leaf ft32px">バージョン:<span class="red">1.2.0.5</span></span></div>

バージョン:1.2.0.5


<span class="icon-link"> <a href="https://digipress.digi-state.com/members/news-for-users/" target="_blank">お知らせ | DigiPress</a></span>

お知らせ | DigiPress


<span class="icon-written-doc">リリースノート</span>

リリースノート

<span class="icon-ok">「el plano」バージョンナンバーの確認</span><

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

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

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

Apple


Apple関連の記事へ

Dropbox


Dropbox関連の記事へ

Youtube


Youtubeへ


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

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

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

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




 
URL :
TRACKBACK URL :

LEAVE A REPLY

*
*
* (公開されません)

Return Top