Menu/Prof
翻訳
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。
\ ポイント最大10倍! /

【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を宣言しておく。

こんな感じ

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

プラグインの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: '';
}
シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!
contents