Font Awesomeをmixinにしようと思ったところ、バックスラッシュがうまく表示されずちょっとハマったのでメモ。
以下でうまく出力できた。
1 | content: #{'"' +'\\' + $code + '"'}; |
出力後
1 | content: "\f054"; |
全体のコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @mixin font-awesome($type, $code) { @if ($type == free) { font-family: "Font Awesome 5 Free"; } @elseif ($type == brands) { font-family: "Font Awesome 5 Brands"; } -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; content: #{'"' + '\\' + $code + '"'}; } |
<雑談>
今さらですが、はじめてWordPressのブロックエディタをカスタムしております。
テーブルで縦方向に見出しを設定、独自ブロックの追加など、やや苦戦しました。
独自ブロック追加や、独自スタイルの追加方法なども記事にしてみようと思います。