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

>>Amazonのお得な最新のタイムセール情報はここ

サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ

ドコモ home 5G「キャッシュバック10,000円」を進呈中！

WP Sitemap Page が出力する sitemapが味気ないので

クラスはなんか定義されてるので上書きしちゃえと CSSつくってたんですがね

FontAwesome6のアイコンを擬似要素に入れてやろうとしてたところ

なんか ちゃんと表示できない。

動かないやつ

.wsp-post:before {
  font-family: "Font Awesome 6 Free";
  content: "\f0da";/*FontAwesomeのアイコンコード*/
  position: absolute;
  left : -1em;
}

なんでだーと調べまくったら

正解はこうらしい。

font-weight を明示的に記述しなきゃダメなん。（４００か９００）

動くやつ

.wsp-post:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900; 
  content: "\f0da";
  position: absolute;
  left : -1em;
}

意外と落とし穴だったｗ

実際の作業

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でカッコいいページは最初から可能です。 しかし・・しばらく使っていると色々やってみたくなりませんか？ …