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

Font Awesome

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

導入準備

公式サイト 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);
}

反転する

例えば、吹き出しの向きを変えたい時などに使えるます。

  • 水平方向に反転:fa-flip-horizontal
  • 垂直方向に反転:fa-flip-vertical
<i class="far fa-comment fa-flip-horizontal"></i>

scaleX か、scaleY か。displayとセットで書き足して下さい。

display: inline-block;
transform: scaleX(-1);

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください