THE THOR ザ・トール 文章中に アイコン を挿入

THE THOR には標準で IcoMoon の アイコン が用意されています。当然ながらアイコンを設置する機能も用意されているのですが、基本的に先頭にしか設置ができません。

文章中にアイコンを挿入するにはどうすれば良いでしょうか？

関連記事グローバルメニューにアイコンを設置

文章中にアイコンを挿入する方法

• アイコンのクラス名はアイコンオプションからコピー
• テキストエディタでHTMLを記述
• 記述したHTMLにコピーしたアイコンのクラス名を追加

以上の流れでアイコンを文中に表示することができます。では詳細をみていきましょう。

アイコンのクラス名をコピーする

アイコンオプションからクラス名をコピーします。

テキストエディタでHTMLを記述

テキストエディタでアイコンを挿入したい場所に以下のコードを記述します。サンプルのコードではアイコンの色を＃191919、文字間を0.3remあけています。好みで調整してください。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

Mana

2,486円(04/20 00:18時点)

発売日: 2019/03/15

Amazonで購入する楽天市場で探すYahoo!で見る

Amazonの情報を掲載しています

アイコンのクラス名を記述

さきほどのコードでここに貼り付けとなっている場所に最初にコピーしたアイコンのクラス名を貼り付けます。

サンプル機能は映画<i class=”icon-film” style=”color:#191919; margin:0 0.3rem; “></i>を見に行きました。

仕上がり機能は映画を見に行きました。

※何もない場所にアイコンを表示することはできません。

以上で、文章中にアイコンを挿入することができます。

あとがき

アイコンは文中に頻繁に使用するものではありません。が、まれに使いたいときが出てきます。

知っておくと便利なtipsです。

毎回コードを打ち込むのは面倒なのでベースのHTMLをテキストファイルで準備しておくと便利です。プラグイン「AddQuicktag」を使うのも良いでしょう。