Font Awesome の導入方法が変わっていました。Kitsが導入されました。無料版では1サイトのみで、ページビューの制限もあります。1サイト以上、無料で使いたい場合はダウンロード版がおすすめです。
kitと、ダウンロード、CDNの設置方法をシェアします。
Kitの導入方法
無料版は1サイト分のKitが利用可能になります。トータルで10,000 ページビュー/月です。Kitsを使うメリットは、新しいバージョンも自動で使用出来る様になります。書き方に変更があっても修正せずに表示される様です。
まず、会員登録し、WebFontのkitのURLを手に入れ、子テーマのfunctionから</head>の前にリンクします。
// fontawesomeをkitで
function enqueue_scripts(){
wp_enqueue_script('fontawesome','https://kit.fontawesome.com/あなたの番号.js');
}
add_action('wp_enqueue_scripts','enqueue_scripts');ダウンロード版の導入方法
ダウンロードし、解凍します。下記は中のjsファイルを子テーマ内に作成したjsフォルダの中に置いた場合です。
//子テーマ内のJS読み込み
function link_scripts() {
wp_enqueue_script( 'font', get_stylesheet_directory_uri() . '/js/all.min.js', '', '', true );
}
add_action('wp_enqueue_scripts', 'link_scripts' );CDNの導入方法 fontawesome v5
Version5（CSS）を暫く使用したい場合は下記のコードで使えるのですが、js版に比べ低速になるそうです。
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style(
'fontawesome5',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'
);
} );CDN fontawesome v6
Version.6もリリースされていました。フックを改良しました。
add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css', array(), '6.5.1' );
}Snow Monkey blocks
プラグインを有効にしたところ、↓こんなリンクが追加されました。
plugins/snow-monkey-blocks/dist/packages/fontawesome-free/js/all.min.js
手軽な使い方 HTML
ソースコード内に選んだアイコンのコードを直接書きます。<i class=”far fa-comment”></i> こんな感じ。
CSS 擬似要素でFont Awesomeのアイコンを付ける
.entry-title::before {
font-family: "Font Awesome 5 Free";
content: "\f1b2";
padding-right: 6px;
}何だか表示されない時は、font-weight:bold で何故か表示されます。
議事要素については、[CSS]:befor や :after 擬似要素を活用する を参考にして下さい。
Version6の場合
上記の５を６にするだけです。
font-family: "Font Awesome 6 Free"; 角度をつける
これは10度傾けた場合です
<i class="far fa-comment fa-rotate-10"></i>CSSの場合はtransformを書き足すだけです。
<h2 class="rotate "><i class="fas fa-heart"></i></h2>.rotate{
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}擬似要素で角度を付ける
「角度をつけたい場合」の前に傾いたアイコンを表示する場合。
<h2 class="rotate">角度をつけたい場合</h2>擬似要素で使用する場合は、displayを追加しないとダメみたいです。
.rotate::before{font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f060";
display: inline-block;
transform: rotate(-20deg);}反転する
例えば、吹き出しの向きを変えたい時などに使えるます。
- 水平方向に反転:fa-flip-horizontal
- 垂直方向に反転:fa-flip-vertical
<i class="far fa-comment fa-flip-horizontal"></i>scaleX か、scaleY か。displayとセットで書き足して下さい。
display: inline-block;
transform: scaleX(-1);表示されない時
CSSで、Facebookなどのロゴマークが表示出来ない時は、”Free”を”Brands”にすると解決します。
font-family: "Font Awesome 5 Free";
を
font-family: "Font Awesome 5 Brands";
コメント ※ハンドルネームでお願いします