Fontawesome 使い方についての話

イブリン

シンプルにやってきたが、そろそろ装飾にも気を使うべきであろうかと考えた。なお、この「WordPressでアフィリエイト」はそこまでやる気はない。

そこでFontawesomeを使うようになったので、メモをしておく。

・https://fontawesome.com

当該サイトはFontawesomeが使えるように、というか、テーマそのものが使っているテーマなので、特別なプラグインは不要である。

仮にチェックじるしを何かの前に書きたい場合

CSS:

.check:before{
color: #FA9CB8;
content: "\f058";
font-family: "FontAwesome",sans-serif;
margin-right: 5px;
}

f058が使いたい番号である。

次にHTML側
HTML:
＜i class="check"＞＜/i＞
＜＞は大文字である。面倒なのでこのままやる。

span class でも表示はできるのだが、wordpressはそのままではビジュアルモードとテキストモードを行き来するところで消えてしまう。span だけが消えるのがデフォルトらしいのだが、span classでも消えた。これをi class にしておくと、消えない。

これでチェックマークの後に5px開けることができると思う。

HTML側はAddQuickTagで固定してやればOK。

参考にしたのはこちら二つ。
・https://ruka-affiliate.com/design/#i-6
・https://saruwakakun.com/html-css/basic/font-awesome