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

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

Font Awesome ってご存じですか?膨大なアイコンを使用できるサービスです。基本的には有料サービスですが、無料版も充実しているのでお勧めです。このサイトでも使用させて貰っています。

INDEX

導入準備

公式サイト Font Awsome だけでなく、多くのサイトで紹介されていますので、割愛する事にします。

手軽な使い方

ソースコード内に選んだアイコンのコードを直接書きます。<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);
よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる