LoginSignup
11
6

More than 5 years have passed since last update.

@oreo3(なが たく)

Font Awesome 5 の導入

Posted at

ちょっとややこしかったのでメモしとく。

  • Solid (塗り), Regular (線), Light (細い線)、Brands (ロゴ等) の4タイプがある
  • 無料版では Solid、Regular、Brands 3タイプの一部が使える。Light は有料の Pro 版のみ
  • Pro版永年ライセンスは60ドルで使用するプロジェクト数の制限はない。ただし、アップデートは1年間のみ可能
  • 前者2つのフォントファミリーは "Font Awesome 5 Free"、Brands は "Font Awesome 5 Brands"
  • npm版は2018年5月3日現在存在しない
  • (要確認) OSにインストールして使える (Illustrator や Adobe XD で使える)

手順

  • ダウンロード & 解凍
  • web-fonts-with-css > webfonts にフォントのデータが入っている。これを一式、プロジェクトのソースディレクトリ > font に入れる
  • web-fonts-with-css > scss にSassデータが入っている。このディレクトリごとプロジェクトのソースディレクトリ > scss に入れ、"font-awesome" とリネーム (プロジェクト/src/scss/font-awesome/)
  • 同ディレクトリ内にある _variable.scss を開き、font ディレクトリのパスやベースサイズ等を変える
    パスは style.scss ではなく style.css からのパスなので注意 (今回の設定では $fa-font-path を "./dev/src/font" に変奥)
  • style.scss で必要なファイルを読み込ませる。通常、Solid　か Regular のいずれかを選択
  • 【ついでに】OSにインストール。use-on-desktop フォルダ内の3つの OTFフォント3つを ライブラリの fonts フォルダに入れ再起動
@import './scss/font-awesome/fontawesome.scss'; //基本・必須
@import './scss/font-awesome/fa-solid.scss'; //Solid (塗り)
// @import './scss/font-awesome/fa-regular.scss'; //Regular (線)
@import './scss/font-awesome/fa-brands.scss'; //ロゴ等

使用方法1 (CSS のみで実装 1)

公式サイトのサンプルを継承を使いシンプルにした
使うアイコンは チートシート や アイコン一覧から探す。
アイコン一覧のページは、右上の i マークを押すと CSS指定で必要な文字コードが表示される。また、ページ最下部でタグや文字コードが簡単コピーできるボタンがある

// font-awesomeアイコン共通の設定
%my-fa-icon-base {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

// 各アイコンをセット

// Solid Sample
//   線アイコン使いたいなら regular のアイコンを指定 (font-family は同じ)
.user::before {
  @extend %my-fa-icon-base;
  font-family: "Font Awesome 5 Free";
  margin-right: .5rem;
  font-weight: 900; // regular のアイコンフォントなら 400
  content: "\f007";
  color: #F00;
}

// Brands Sample
.twitter::before {
  @extend %my-fa-icon-base;
  margin-right: .5rem;
  font-family: "Font Awesome 5 Brands";
  content: "\f099";
  color: #00aced;
}

使用方法2 (HTML の i タグで)

一例。クラス付だけでサイズ指定や回転、重ね合わせ等も可能。
Solid (fas), Regular (far), Brands (fab)、プラス アイコン種の指定

基本

<i class="fas fa-user"></i>

サイズ

<i class="fas fa-camera-retro fa-xs"></i>
<i class="fas fa-camera-retro fa-sm"></i>
<i class="fas fa-camera-retro fa-lg"></i>
<i class="fas fa-camera-retro fa-2x"></i>
<i class="fas fa-camera-retro fa-3x"></i>
<i class="fas fa-camera-retro fa-5x"></i>
<i class="fas fa-camera-retro fa-7x"></i>
<i class="fas fa-camera-retro fa-10x"></i>

リスト

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

モーションあり

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>

回転

<i class="fab fa-font-awesome fa-rotate-90"></i>
<i class="fab fa-font-awesome fa-rotate-180"></i>
<i class="fab fa-font-awesome fa-rotate-270"></i>
<i class="fab fa-font-awesome fa-flip-horizontal"></i>
<i class="fab fa-font-awesome fa-flip-vertical"></i>

使用方法3 (CSS のみで実装 2)

自分は使ってないけどメモ。
まず、必須の "fa-icon" ミックスインを読み込ませる。
そして、Solid なら .fas、Regular なら .far、Brands なら .fab を継承。
アイコンフォントを使いたい要素のスタイリングを行う (beforeで前に追加する実装)

.user {
  @include fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}

.twitter {
  @include fa-icon;
  @extend .fab;

  &:before {
    content: fa-content($fa-var-twitter);
  }
}

使用方法4 (JavaScript でインポート)

参考記事

11
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
6