【Font Awesome 6 Free】CSS擬似要素ではまる

contents
WP Sitemap Page が出力する sitemapが味気ないので
クラスはなんか定義されてるので上書きしちゃえと CSSつくってたんですがね
FontAwesome6のアイコンを擬似要素に入れてやろうとしてたところ
なんか ちゃんと表示できない。
動かないやつ
.wsp-post:before { font-family: "Font Awesome 6 Free"; content: "\f0da";/*FontAwesomeのアイコンコード*/ position: absolute; left : -1em; }
なんでだーと調べまくったら
正解はこうらしい。
font-weight を明示的に記述しなきゃダメなん。(400か900)
動くやつ
.wsp-post:before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f0da"; position: absolute; left : -1em; }
意外と落とし穴だったw
実際の作業
stというクラスを作って wp saitemapの起動トリガーの単語 wp_sitemap_page only=”post” をカラムで囲んで
そのカラムの高度な設定でこのstを宣言しておく。
こんな感じ

その意味がよくわかんない場合は↓読んでください。
あわせて読みたい

【swell カスタマイズ】cssを部分定義する方法
SWELLで cssの部分定義をカスタマイズする 今まで 定義したCSSは 全体に効果がある ページ毎に効果がある でしたね。 実はSWELLにはまだ細かくカスタマイズできる部分が…
プラグインのWP Sitemap Page 用の固定ページのエディット画面の カスタムCSSに以下を記述してください。
使用したCSS
.st ul { position: relative; } .st ul li { line-height: 1.5; padding: 0.5em 0; list-style-type: none!important; } .st a{color:#3f4c58} .wsp-post:before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f0da";/*アイコンの種類*/ position: absolute; left : -1em;/*左端からのアイコンまでの距離*/ color: #b0eaff; } .wsp-posts-title{ border-bottom: none; LETTER-SPACING:3px; padding: 1rem 3rem; -webkit-transform: skew(-15deg); transform: skew(-15deg); color: #000; background-image: -webkit-gradient(linear, left top, right top, from(#b0eaff), to(#fff)); background-image: -webkit-linear-gradient(left, #b0eaff 0%, #fff 100%); background-image: linear-gradient(to right, #b0eaff 0%, #fff 100%); } .wsp-category-title{ position: relative; bottom: 0; left: 0; width: 100%; height: 10px; border-bottom: 1px solid #b0eaff; content: ''; }
あわせて読みたい

【swellカスタマイズ】css定義の方法
SWELLのcssの定義のやりかた SWELLは何もしなくてもCOOLでカッコいいページは最初から可能です。 しかし・・しばらく使っていると色々やってみたくなりませんか? 「簡…