THE THOR 文章中に アイコン を挿入

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

 

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

 

この記事でできること。

標準だとアイコンは文頭にしか設置できません。
この記事の方法だと文中にも末尾にも設置することができます

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

 

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

 

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

 

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

 

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

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

アイコン オプション クラス名 挿入

 

アイコン オプション クラス名 挿入 コピー

 

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

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

<i class=”ここに貼り付け” style=”color:#191919; margin:0 0.3rem; “></i>
\基本は本で学ぶ/
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

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

Mana
2,237円(10/19 12:16時点)
発売日: 2019/03/15
Amazonの情報を掲載しています

 

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

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

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

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

 

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

 


 

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

 

あとがき

 

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

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

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

プラグイン追加手順(ワードプレス)
プラグイン → 新規追加 → 「AddQuicktag」を検索/インストール/有効化
プラグイン AddQuicktag 文章中 アイコン 挿入 コード
>