Webフォント
take7では「Font Awesome」を積極的に導入しています。ただし、スマホ表示では反映されませんので、あしからず。20151027：プラグインによる記述ならスマホも大丈夫。
CSS3の「Webフォント」機能により、画像ではなくテキスト(文字)として表示できる「Font Awesome」というフォントのセットを利用します。500以上のWebフォントアイコンが提供されています。
CDN（Content Delivery Network＝コンテンツ配信ネットワーク）サービスと呼ばれているしくみで、CDNサーバ上のFont Awesomeファイルを読み込むための「そのリンク要素」を本文などのHTMLに追記するだけで利用できます。
HTMLの記述 ↓（ビジュアル編集画面非表示） ↓ こちらが表示画面の表示
<i class=”fa fa-home”> ホーム</i> ホーム
通常の文字と同じ扱いなので、色・寸法さらに回転、重ね書き等々、CSS の指示だけで可能です。詳しくは関係者限定の「編集者用操作ガイド」に説明がありますが、ここでは、いくつかの実例を紹介します。
旗 旗 旗上下反転
旗
なお、take7では「エディタ」編集ツールバーに「Quicktags」メニューボタンを設定しています。このメニューにWebフォントの中で記事を編集するとき使用頻度が大きいと思われるWebフォントアイコンの選択肢をいくつか並べてありますので、該当のメニューを選択すると、あらかじめ用意されたHTML記述が自動的に入力されます。たとえば次のようなものです。
さて、20151027にWP Visual Icon Fontsというプラグインを入れてみました。編集ツールに「icons」プルダウンメニューが表示されます。先に単発で入れていたFont Awesomeに添えていたテキストが縦書きになるという現象が起きています。
PDF←「<i class=”fa fa-file-pdf-o”> PDF</i>」が自動的に本文に入力されます。
外部リンク←「<i class=”fa fa-file-pdf-o”> 外部リンク</i>」が同上。
ここにプラグインでiconsを入力してみますと。
編集画面にも表示されます。
記述は<p> <i class="fa fa-bell"><span style="color: transparent; display: none;">icon-bell</span></i> 編集画面にも表示されます。</p>
テキストも標準でおさまり、アイコンだけに色をつけるのもやりやすく。
サイズもこのように、テキストと分けて指定できます。
記述は<p><span style="font-size: 36px;"> <i class="fa fa-bell"></i> </span><span>フォントサイズもこのように、テキストと分けて指定できます。</span></p>
非常に扱いやすくなります。
外部リンク
スマホ画面にも表示できます。
ただ、残念なことに現在は「file-pdf」は用意されていません。
でもこうしたら？
「file-pdf」を入力すると・・・あは、駄目なようです。残念です。