サイト内検索
パンくずリストのアイコンをカテゴリ毎に変えたい | CSSカスタマイズ相談 | Cocoon フォーラム

Topic starter2022年7月21日 09:26
お世話になっております。
パンくずリストに表示されるフォルダアイコンをカテゴリ毎に変えられないかと考えております。
ウィジットのカテゴリのアイコンを変えるプラグインを使用しておりまして
パンくずリストも同じ事をCSSで実装出来ないかと思いました。
プラグインがどの様にCSSを出力しているのか確認したところ、アイコンを表示してから
afterでカテゴリ名を表示している様です。
パンくずリストはカテゴリの前に.fas.fa-folder.fa-fwをbeforeで表示している様ですが
この部分をカテゴリーIDか何かと関連づけてユニークなアイコンを表示出来ればと思いました。
アドバイス頂けるとうれしいです。
----------------------------------------------
サイト名:VoIP and Monitoring Blog
サイトURL: https://cedarvalley.info
ホームURL: https://cedarvalley.info
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:6.0.1
PHPバージョン:7.4.29
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.7
カテゴリ数:7
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:3414バイト
functions.phpサイズ:943バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2022/02/SNS2.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
AddToAny Share Buttons 1.8.4
ConoHa WING コントロールパネルプラグイン 1.1
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.6.1
Easy Category Icons 1.0.1
Featured Image Generator 1.3.0
Google XML Sitemaps 4.1.5
Invisible reCaptcha 1.2.3
SimTerm 0.3.0
SiteGuard WP Plugin 1.6.1
TinyPNG - JPEG, PNG & WebP image compression 3.4
WP Multibyte Patch 2.9
----------------------------------------------
2022年7月21日 10:51
以下の通りです。
/* 既存のアイコン非表示 */ .breadcrumb-item > .fas{ display: none; } /* URLに「technology」が含まれる */ .breadcrumb-item a[href*="technology"]:before { content: "\f07c"; font-family: 'Font Awesome 5 Free'; font-weight: 900; } /* URLに「zabbix-monitoring」が含まれる */ .breadcrumb-item a[href*="zabbix-monitoring"]:before { content: "\f233"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
Easy Category Iconについて
各カテゴリ毎に個別にclassが付いており、わざわざプラグインを使わなくてもアイコンを追加できます。
ただ、Easy Category Iconsの機能なのか、以下の定義が反映されません。
例
/* カテゴリ「APPLE」に付いている個別のclass */ .cat-item-18 > a:before { content: '\f02d'; font-family: "Font Awesome 5 Free"; font-weight: 900; }
わいひら 件のいいね!