よく使わせて頂いているWEBアイコンフォント Font Awesome（フォント オーサム）ですが、
バージョン5から一新され、アイコン名やクラス名・Unicodeが変わったり、
太さの指定が必要になったり、ブランドアイコンを使う際はfont-familyの指定を変えるなど、
使い方が複雑になりました。
https://fontawesome.com/
旧バージョンを使うこともできますが、
もう開発が止まっており新しいアイコンは追加されません。
https://fontawesome.com/v4.7.0/
以前のようにシンプルにフォントを使っていきたいと思っていたところ、
Fork Awesome（フォーク オーサム）というプロジェクトを知りました。
Fork Awesomeとは
Font Awesomeバージョン5から制作者が方向性に疑問を感じて、
以前のバージョン4.7からフォーク（分岐した別のプロジェクトを開発）し、
Fork Awesomeという派生したWEBアイコンフォントプロジェクトを作りました。
現在はオープンソースコミュニティによって管理されています。
Fork Awesomeのメリット
フォントは全て無料で商用利用可能となっています。
Fork Awesomeの使い方や速度・クオリティは Font Awesome4.7と変わりませんが、
新しいアイコンが76種追加され、アイコン数は744種となっています。(2019年6月現在)
Font Awesomeでは受け付けなくなったアイコンの追加リクエストも、 Fork Awesomeでは受け付けています。
Font Awesome4.7以前から Font Awesome5 に移行しようとするとクラス名やアイコン名・Unicodeが変わっているので書き換えが大変ですが、
Fork Awesomeでは、クラス名やアイコン名・Unicodeは変更していないとのことで、
CDNコード又はフォントファイル・cssの差し替え、疑似要素のfont-familyの指定を変えるだけで移行できるので簡単です。
→ Font Awesome4.7以前から移行する場合はこちら
Fork Awesomeの使い方
CDNを利用する方法と、フォントをダウンロードして使う方法があります。
1.フォントの読み込み
【CDN利用の場合】
https://forkaweso.me/Fork-Awesome/get-started/
上記ページの 「Use a CDN」 のコードを<head>内に貼り付けます。
|
1 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous"> |
【ダウンロードして使う場合】
Fork Awesomeからダウンロードしてきたzipファイルを解凍します。
中身のfontsフォルダと、
cssフォルダ内のfork-awesome.cssをサイトの任意の場所に設置します。
fork-awesome.cssのソースの下記コードのURL参照箇所 url(‘../fonts/～）の相対パスを、サイトのフォルダ構成に合わせて変更します。
|
1 2 3 4 5 6 7 |
@font-face { font-family: 'ForkAwesome'; src: url('../fonts/forkawesome-webfont.eot?v=1.1.7'); src: url('../fonts/forkawesome-webfont.eot?#iefix&v=1.1.7') format('embedded-opentype'), url('../fonts/forkawesome-webfont.woff2?v=1.1.7') format('woff2'), url('../fonts/forkawesome-webfont.woff?v=1.1.7') format('woff'), url('../fonts/forkawesome-webfont.ttf?v=1.1.7') format('truetype'), url('../fonts/forkawesome-webfont.svg?v=1.1.7#forkawesomeregular') format('svg'); font-weight: normal; font-style: normal; } |
全部で6箇所あります。
2.フォントの表示指定
【HTML側で表示指定する場合】
<body>内に使いたいフォントのコードを貼り付けます。
|
1 |
<i class="fa fa-fork-awesome" aria-hidden="true"></i> |
【CSS側で疑似要素として表示する場合】
疑似要素のcontentに \(半角円マークか半角バックスラッシュ)の後に使いたいフォントのUnicode、
font-familyに‘ForkAwesome’を指定します。
|
1 2 3 4 |
li:before{ content: '\f2e3'; // \の後に使いたいフォントのUnicode font-family: 'ForkAwesome'; } |
3.表示完了
これで表示出来ます。
アイコンフォントの太さなどはcssで指定するだけで簡単に変えられます。
Font Awesome4.7以前から移行する場合
1.フォントの読み込み
【CDN利用の場合】
https://forkaweso.me/Fork-Awesome/get-started/
Font AwesomeのCDNを読み込んでいたコードを、上記ページの 「Use a CDN」 のコードと差し替えます。
|
1 2 |
<!-- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous"> |
※お使いのバージョンによってCDNコードは違います。
【ダウンロードして使っている場合】
Fork Awesomeからダウンロードしてきたzipファイルを解凍します。
中身のfontsフォルダと、
cssフォルダ内のfork-awesome.cssをサイトの任意の場所に設置します。
fork-awesome.cssのソースの下記コードのURL参照箇所 url(‘../fonts/～）の相対パスを、サイトのフォルダ構成に合わせて変更します。
|
1 2 3 4 5 6 7 |
@font-face { font-family: 'ForkAwesome'; src: url('../fonts/forkawesome-webfont.eot?v=1.1.7'); src: url('../fonts/forkawesome-webfont.eot?#iefix&v=1.1.7') format('embedded-opentype'), url('../fonts/forkawesome-webfont.woff2?v=1.1.7') format('woff2'), url('../fonts/forkawesome-webfont.woff?v=1.1.7') format('woff'), url('../fonts/forkawesome-webfont.ttf?v=1.1.7') format('truetype'), url('../fonts/forkawesome-webfont.svg?v=1.1.7#forkawesomeregular') format('svg'); font-weight: normal; font-style: normal; } |
全部で6箇所あります。
font-awesome.cssを読み込んでいた箇所のコードをfork-awesome.cssに変更します。
|
1 2 |
<!-- <link rel="stylesheet" href="css/font-awesome.css"> --> <link rel="stylesheet" href="css/fork-awesome.css"> |
2.フォントの表示指定
【HTML側で表示指定している場合】
何も変更する必要はありません。
【CSS側で疑似要素として使っている場合】
疑似要素のfont-familyを‘FontAwesome’から‘ForkAwesome’に変更します。
|
1 2 3 4 5 |
～:before{ content: '○○'; // そのまま /* font-family: 'FontAwesome'; */ font-family: 'ForkAwesome'; } |
3.移行完了
これだけで移行完了です。
まとめ
Font Awesome4.7以前からの移行が簡単で、非常に助かります。
オープンソースコミュニティなので管理者の方に感謝して利用していきたいと思います。
今後の発展が楽しみです。
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet02.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet03.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
