Font Awesomeの使い方(使いそうなアイコン一覧)

html&css


Font Awesomeの使い方とよく使うアイコンをコピペできるようにしてみました
MITライセンスで使いやすいですね、バージョンは5で確認しました。

公式サイトはこちらから

ダウンロードして使う

こちらからダウンロードして使用することができます。

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)を配置して、下記のように読み込みます。
必要なファイルが1つで済むので、基本的にはこっちがいいと思います。

<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-lg1.33em
fa-2x2em
fa-3x3em
fa-4x4em
fa-5x5em
fa-6x6em
fa-7x7em
fa-8x8em
fa-9x9em
fa-10x10em
<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のロゴですね..😄



公式のDocはこちら

アイコンを回転する

アイコンを回転したり、反転したりする時は下記のようにfa-rotate-xxxまたはfa-flip-xxxを使います。

クラス内容
fa-rotate-9090°回転
fa-rotate-180180°回転
fa-rotate-270270°回転
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>

上記のように書くと..
こんな感じで、回転&反転されました。







公式のDocはこちら

アイコンの回転アニメーション

アイコンに回転アニメーションをつける時は、fa-spinまたはfa-pulseを使います。
fa-spinが普通の回転で、fa-pulseが8ステップの回転(カクカクする)のようです。

<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を指定してみました。





公式のDocはこちら

よく使うアイコン一覧

codepenで、Webサイト作成などでよく使いそうな一覧を作ってみました。
クリックするとコピーできます。

See the Pen
[font awesome]often use icons
by yasuaki (@include777)
on CodePen.

html&cssWeb
プロフィール
yasuaki

福岡でフリーランスをやってます。
業界歴14年になりました、SESで働くことがほとんどです。
なんでもやってますが、Webが得意です。

このブログではプログラミング技術の内容を中心に商品レビューなどを書いています。
記事が参考になりましたら、共有やリンクなどいただけると幸いです。

yasuakiをフォローする
にほんブログ村 IT技術ブログへ
yasuakiをフォローする
コードライク

コメント

タイトルとURLをコピーしました