TCDテーマで表示するアイコンを変更する方法

Q.TCDテーマの「スマホ用固定フッターバー」で表示するアイコンを変更したい

「スマホ用固定フッターバー」で表示するアイコンは、大量にあるアイコンフォントの中の一部を抜粋しています。以下の方法で、管理画面の選択肢にないアイコンを表示させたりする事が可能です。

A.下記の方法でご対応ください。

1）
「fonts/design_plus.svg」の「glyph-name」の値にて、大体の表示させたいアイコンを確認します。
※「glyph-name=”この部分を確認してください”」

例：「restaurant」部分
<glyph unicode=”&#xe56c;” glyph-name=”restaurant“ d=”M682 682.667c0 76 96 170 214 170v-852h-106v340h-108v342zM470 554.667v298h84v-298c0-90-70-164-160-170v-384h-106v384c-90 6-160 80-160 170v298h86v-298h84v298h86v-298h86z” />

2）
「glyph-name」の横にある「unicode」の値の一部をコピーします。
※「unicode=”&#xこの部分をコピーしてください;”」（&#xと;はコピーしないでください）

例：「e56c」部分
<glyph unicode=”&#xe56c;” glyph-name=”restaurant” d=”M682 682.667c0 76 96 170 214 170v-852h-106v340h-108v342zM470 554.667v298h84v-298c0-90-70-164-160-170v-384h-106v384c-90 6-160 80-160 170v298h86v-298h84v298h86v-298h86z” />

3）
デベロッパーツールでアイコン部分に適用されているクラス名を確認します。

Google Chromeのデベロッパーツールの基本的な使い方を解説 – ワードプレステーマTCD

ウェブサイトの構造（HTML）や適用されているスタイル（CSS）を確認するには、デベロッパーツールが便利です。構造がわかれば、一部を編集して簡単にテスト・検証することも可能です。

例：
.p-social-nav__item–twitter a::before {
content: “\e904”;
}

4）
テーマオプション＞基本設定のカスタムCSSで「3）」で確認したクラス名のスタイル（contentの値）を上書きします。

例：「e904」を「2）」で確認した「e56c」に置き換えます。
.p-social-nav__item–twitter a::before {
content: “\e56c”;
}