Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Font Awesome 5がリリースされたぞ!

More than 1 year has passed since last update.

Font Awesome 5
fontawesome.com

(URLも従来の.ioから移転されました。)

v4からのアップデートガイド(英語)

更新の概要

  • お金を払ってより多くのアイコンを手に入れることができる、Proバージョンができました。
    • 無償版でも従来から比べてアイコン数が増え便利になりますが、ProではLightウェイト等の追加のアイコンを利用できます。
  • アイコンの数はもちろん増えました。
  • 導入方法が増えました。
  • アイコンの種類が明確に分かれました。
    • Solid(塗りつぶし), Regular(線・標準の太さ), light(線・細い Proのみ), Brands(ブランド)の4種類があります。
    • アイコン一覧では種類ごとに使えるアイコンを見ることができます。
  • faプレフィックスに代わり、種類ごとのプレフィックスfas,far,fal,fabになりました。
    • 例えば<i class="fab fa-line"></i>,<i class="fas fa-clock"></i>など。
  • 種類分けに併せて、アイコンの命名が変わりました
    • より論理的に、そして無垢になりました。
    • 4から利用している方は要注意です。しかしご安心ください。fa-v4-shim.jsを利用すれば、そのままで大丈夫です。
    • → アップグレードガイドを参照してください。

導入例

サイトビルダーや一般的なビルドを行うサービス等、事前処理ができる状況においては、JavaScriptの処理をビルド時にしてしまいたいと誰もが思うはずです。
npmパッケージ化によってそれができるようになりました。

以下に例を示しますが、APIの説明をすっとばして実使用の場合のみを想定しています。
詳しくはAPIの説明を読んでください。
ブラウザとnode.js双方の仕様についてたいへんわかりやすく書かれています。

例を示すと言ったな?あれは嘘だ。
公式ドキュメントを見つけたので削除しちゃいました
https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering

tamaina
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away