Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

Font Awesomeアイコンの使い方と応用

Font Awesome

Font Awesome の導入方法が変わっていました。CDNが廃止になるようです。そして便利なKitsが導入されました。無料版では1サイトのみで、ページビューの制限もあります。1サイト以上、無料で使いたい場合はダウンロード版がおすすめです。

kitと、ダウンロード、CDNの設置方法をシェアします。ブロックのプラグインでも導入できました。

INDEX

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' );

DNSの導入方法

DNS 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'
    );
} );

Snow Monkey blocks

プラグインを有効にしたところ、↓こんなリンクが追加されました。

plugins/snow-monkey-blocks/dist/packages/fontawesome-free/js/all.min.js

手軽な使い方

ソースコード内に選んだアイコンのコードを直接書きます。<i class=”far fa-comment”></i> こんな感じ。

擬似要素でFont Awesomeのアイコンを付ける

:before
.entry-title::before {
    font-family: "Font Awesome 5 Free";
    content: "\f1b2";  
    padding-right: 6px;
}

何だか表示されない時は、font-weight:bold で何故か表示されます。

議事要素については、[CSS]:befor や :after 擬似要素を活用する を参考にして下さい。

角度をつける

これは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";

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX