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

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

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

A.該当ファイルを編集してください

編集するファイル:style.cssまたはfooter-bar/footer-bar.css、admin/css/my_admin.css

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

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

3)
「style.cssまたはfooter-bar/footer-bar.css」の
.icon-〇〇〇:before {
content:”\●●●●”;
}
の「content:”\●●●●”」の●●●●の部分に張り付けると、サイトで表示するアイコンを変更することができます。

4)
「admin/css/myadmin.css」の
.icon-〇〇〇:before {
content:”\●●●●”;
}
の「content:”\●●●●”」の●●●●の部分にも張り付けると、管理画面の「スマホ用固定フッターバー」で選択できるアイコンも変更することができます。

※カスタムCSSに下記を記載する方法でもアイコンを変更できます。
on-share-alt:before { content: “\●●●●”; }

※テーマによってはクラス名が記事に記載されているものとは異なります。
下記に記載されているツールなどを使って該当のクラス名を特定し、ご指定下さい。
超初心者向け!クロームのデベロッパーツールの基本操作

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

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

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