「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

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)
デベロッパーツールでアイコン部分に適用されているクラス名を確認します。

例:
.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”;
}

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事