Cocoon　サイドバーのカテゴリーカスタマイズ

2022年1月22日

サイドバーにカテゴリー設置

外観　➡　ウィジェット　➡　サイドバーに追加していきます。

カテゴリーをサイドバーにウィジェット追加していきます。

カテゴリーの表示設定をして保存します。

サイドバーのカスタマイズ

初期設定のカテゴリーサイドバーを、アイコン付きに変更していきます。

今回、使ったアイコンフォント

使ったCSS

/* カテゴリーfa5アイコン表示 */
.widget_categories ul li a{ 			
  border-bottom: 1px dashed #CCCCCC;  		
}			
.widget_categories ul li a::before{			
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/			
  content: "\f07b";
  color:#a6baf5;			
  padding-right: 6px;	
  font-weight: 900;		
	  font-size: 16px;		
}						
.widget_categories > ul > li > a:first-child{ 			
  border-top: none;		
}								
.widget_categories ul li a{ 			
  border-bottom: 1px dashed #CCCCCC;		
}			
.widget_categories ul li ul li a::before{ 		
  font-family: "Font Awesome 5 Free";
  content: "\f101"; 
  color:#a6baf5;		
  padding-right: 6px;	
  font-weight: 900;	
	  font-size: 16px;		
}

content の所が、アイコンの場所になります。

Font Awesome 5 で、好きなアイコンの番号を入力してください。

親カテゴリーと、子カテゴリー両方変更してください。

私の画像のアイコンでよければ、そのままCSSを貼ってください。

Font Awesome 5の使い方

・Font Awesome 5でアイコンを探す。

使いたいアイコンをクリックして、番号をコピーしてCSSのアイコン番号を貼り替えてください。

 

うまくいかないときの対処方法。

Cocoon設定の、全体から、Font Awesome 5 にチェックが入っているか、確認しましょう。

 

それでもダメな場合は、キャッシュを削除する。