Font Awesomeの使い方とよく使うアイコンをコピペできるようにしてみました
MITライセンスで使いやすいですね、バージョンは５で確認しました。
公式サイトはこちらから
ダウンロードして使う
こちらからダウンロードして使用することができます。
cssから使う
cssファイルを指定して使いたい場合は、ダウンロードしたディレクトリに入っている
cssディレクトリのall.css(またはall.min.css)とwebfontディレクトリが必要です。
下記のディレクトリ構造を保ったまま、静的ファイルを設置するディレクトリに持って行って配置して..
css
|_ all.css
webfont
headタグの中などで、下記のように読み込みます。
<head>
<link href="css/all.min.css" rel="stylesheet" />
</head>
javascriptから使う
読み込める場所にall.js(all.min.js)を配置して、下記のように読み込みます。
必要なファイルが１つで済むので、基本的にはこっちがいいと思います。
<head>
<script src="all.js"></script>
</head>
CDN(Font Awesome Kits)で使う
Font Awesomeに登録してから、使用するスクリプトのURLを取得するという流れになります。
スタートページから、メールアドレスを入力して登録します。
登録すると、下記のURLで使えるkitが表示されるので、javascriptを読み込んで使用します。
https://fontawesome.com/kits
<script src="https://kit.fontawesome.com/[ここがそれぞれ変わるみたいです].js" crossorigin="anonymous"></script>
Font Awesome CSS
Font Awesomeで定義されているクラスなどについて、使いそうなものだけピックアップして書いています。
公式のメニューのDocのところにいろいろと使い方が書いていました。
アイコンのサイズ
iタグのクラスに下記のクラスを適用するとサイズが変更できます。
fa-xs, fa-2xなど定義されているクラスを使えます。
| クラス | サイズ |
|---|---|
| fa-xs | .75em |
| fa-sm | .875em |
| fa-lg | 1.33em |
| fa-2x | 2em |
| fa-3x | 3em |
| fa-4x | 4em |
| fa-5x | 5em |
| fa-6x | 6em |
| fa-7x | 7em |
| fa-8x | 8em |
| fa-9x | 9em |
| fa-10x | 10em |
<i class="fab fa-php fa-lg"></i>
<i class="fab fa-php fa-2x"></i>
<i class="fab fa-php fa-3x"></i>
上記のアイコンはこんな感じで表示されます。
phpのロゴですね..😄
アイコンを回転する
アイコンを回転したり、反転したりする時は下記のようにfa-rotate-xxxまたはfa-flip-xxxを使います。
| クラス | 内容 |
|---|---|
| fa-rotate-90 | 90°回転 |
| fa-rotate-180 | 180°回転 |
| fa-rotate-270 | 270°回転 |
| fa-flip-horizontal | 水平方向に反転 |
| fa-flip-vertical | 垂直方向に反転 |
| fa-flip-both | 垂直方向および水平方向に反転 |
<div class="fa-3x" style="display:flex;justify-content:space-between;">
<i class="fas fa-github"></i>
<i class="fas fa-github fa-rotate-90"></i>
<i class="fas fa-github fa-rotate-180"></i>
<i class="fas fa-github fa-rotate-270"></i>
<i class="fas fa-github fa-flip-horizontal"></i>
<i class="fas fa-github fa-flip-vertical"></i>
<i class="fas fa-github fa-flip-both"></i>
</div>
上記のように書くと..
こんな感じで、回転＆反転されました。
アイコンの回転アニメーション
アイコンに回転アニメーションをつける時は、fa-spinまたはfa-pulseを使います。
fa-spinが普通の回転で、fa-pulseが８ステップの回転（カクカクする）のようです。
<div class="fa-2x">
<i class="far fa-grin-squint fa-spin"></i>
<i class="far fa-grin-squint-tears fa-spin"></i>
<i class="far fa-grin-tongue fa-spin"></i>
<i class="far fa-hand-point-left fa-spin"></i>
<i class="far fa-hand-point-left fa-pulse"></i>
</div>
上記のように書くと..
こんな感じで、回転します。一番右のアイコンだけfa-pulseを指定してみました。
よく使うアイコン一覧
codepenで、Webサイト作成などでよく使いそうな一覧を作ってみました。
クリックするとコピーできます。
See the Pen
[font awesome]often use icons by yasuaki (@include777)
on CodePen.
コメント