TCDテーマSOURCE:3点ボックスコンテンツに表示するアイコンを変更する方法

2020/12/21 記事を更新しました。

Q.トップページ「3点ボックスコンテンツ」に表示できるアイコンは他にないのでしょうか?

テーマオプション内の3点ボックスコンテンツ設定箇所で選択できるアイコンは、大量にあるアイコンフォントの中の一部を抜粋しています。以下の方法で、テーマオプション内の選択肢にないアイコンを表示させる事が可能です。

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

1. 表示させたいアイコンを確認する

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

2. unicodeの値を確認する

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

3. CSSを調整する

適用されているCSSのクラス名等を確認し、カスタムCSSで適用されていた値を2.で確認した値に変更することにてアイコンを変更します。

例:トップページ「3点ボックスコンテンツ」のボックス1のアイコンを変更する
外観>TCDテーマオプション>基本設定のカスタムCSSに以下のように入力します。

#index_3box_list .num1 span:before {
content: “\〇”;
}

 
補足)
・〇には2.でコピーした値を入力してください。
・「num1」の数値を変更することでボックス2・3で表示されているアイコンを変更することが可能です。
・他の箇所のアイコンを変更されたい場合は、デベロッパーツールで適用されているCSSをご確認ください。→ Chromeデベロッパーツールの使用方法

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

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

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