MEMORANDUM

調べて知り得た情報をせっかくなのでメモしとく

CATEGORIES:TOOLS
アイコンフォントFont Awesomeを使う

Warning: Undefined variable $sc_Linkcard in /home/nrocks/backon69.com/public_html/memo.backon69.com/wp-content/themes/MEMORANDUM-V04.2/functions.php on line 146
Font Awesome
The internet's icon library + toolkit. Used by millions of d…
https://fontawesome.com/

アイコンを画像で作ることはもうない。無料（一部）で使えるし言うことないな。このサイトも含めかなり使わせてもらっている。

利用方法にはCDNを利用する方法と自分のサーバへアップロードする方法がある。自分でサーバにアップロードしていくのも面倒だしCDNを利用する。部分的に数点使うことが多いのでCDNのほうが簡単だ。

上記のFont Awesomeにアクセスして「Get Started for Free」をクリックしてメールアドレスを入力画面へ。入力したら「Send Kit Code」をクリック。

しばらくするとメールが送られてくる。「Click to Confirm Your Email Address + Set Things Up」をクリックするとパスワード入力画面が開くので入力。

その後に名前入力画面が表示されるので、FirstNameとLast nameのみ入力して「All set Let’s go!」をクリックすると以下のようなコードが発行される。前はlink タグだったので？と思い調べてみたのだが、この時点でSVGがWebフォントか選べたようだ。アカウント登録後にマイアカウントのところでもコードを見ることができる。どっちがいいんだろ？SVGのほうが鮮明？一応説明読んだらSVGの方が新しく高度だと書いてあった。

あとバージョンにより記述が変わるようなので注意。

コードを<head></head>内に記述する。
これはあとは使いたいアイコンフォントを選ぶ。

  <head>
    <!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/1398f87f09.js" crossorigin="anonymous"></script>
  </head>

たとえばbattery-three-quartersの場合、Freeで使えるのはSOLIDのみだがそれを選択して上にあるコードをコピーしてHTML上に記述する。

<i class="fas fa-battery-three-quarters"></i>

こんな感じで表示される。いろんな設定ができる。

サイズを変える

スタイルで指定もサイズ変更できるけどタグ内でクラスを追加して設定できる。

<i class="fas fa-battery-three-quarters fa-xs"></i>
<i class="fas fa-battery-three-quarters fa-sm"></i>
<i class="fas fa-battery-three-quarters fa-lg"></i>
<i class="fas fa-battery-three-quarters fa-2x"></i>
<i class="fas fa-battery-three-quarters fa-3x"></i>
<i class="fas fa-battery-three-quarters fa-5x"></i>
<i class="fas fa-battery-three-quarters fa-7x"></i>
<i class="fas fa-battery-three-quarters fa-10x"></i>

色を変える

アイコンだけだけ色を変更するとかあるかも。

<p><i class="fas fa-battery-three-quarters red  fa-3x"></i></p>
          
<style>
  .red {color: ff0000;}
</style>

アイコンの幅を揃える

アイコンにより幅が違うらしい。幅を揃えるには「fa-fw」というクラスを追加する。

<i class="fas fa-battery-three-quarters fa-3x fa-fw"></i>

回転・反転

あまり使わないと思うけど。一応知っておこう。

<div class="fa-3x">
  <i class="fas fa-battery-three-quarters"></i>
  <i class="fas fa-battery-three-quarters fa-rotate-90"></i><!-- 90度回転 --> 
  <i class="fas fa-battery-three-quarters fa-rotate-180"></i><!-- 180度回転 --> 
  <i class="fas fa-battery-three-quarters fa-rotate-270"></i><!-- 270度回転 --> 
  <i class="fas fa-battery-three-quarters fa-flip-horizontal"></i><!-- 水平回転 -->
  <i class="fas fa-battery-three-quarters fa-flip-vertical"></i><!-- 垂直回転 -->
</div>
<div class="fa-2x">
  <i class="fas fa-battery-three-quarters fa-spin"></i><!-- 回転 -->
</div>

たまに表示されないアイコンがある。サーバにないのかバグなのか。

NOTICES

  • 記事内容は実装させたものがほとんどですが自己責任で参考にしてください。

PRIVACY POLICY

PROFILE

TO HEADER