WEBアイコンフォントFont Awesome4.7からFork Awesomeへ

2019/06/25 サイト制作 投稿者:前原

よく使わせて頂いているWEBアイコンフォント Font Awesome(フォント オーサム)ですが、
バージョン5から一新され、アイコン名やクラス名・Unicodeが変わったり、
太さの指定が必要になったり、ブランドアイコンを使う際はfont-familyの指定を変えるなど、
使い方が複雑になりました。
https://fontawesome.com/

旧バージョンを使うこともできますが、
もう開発が止まっており新しいアイコンは追加されません。
https://fontawesome.com/v4.7.0/

以前のようにシンプルにフォントを使っていきたいと思っていたところ、
Fork Awesome(フォーク オーサム)というプロジェクトを知りました。

Fork Awesomeとは

Fork Awesome

Font Awesomeバージョン5から制作者が方向性に疑問を感じて、
以前のバージョン4.7からフォーク(分岐した別のプロジェクトを開発)し、
Fork Awesomeという派生したWEBアイコンフォントプロジェクトを作りました。
現在はオープンソースコミュニティによって管理されています。

Fork Awesome公式

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>内に貼り付けます。

【ダウンロードして使う場合】

Fork Awesomeからダウンロードしてきたzipファイルを解凍します。
中身のfontsフォルダと、
cssフォルダ内のfork-awesome.cssをサイトの任意の場所に設置します。

fork-awesome.cssのソースの下記コードのURL参照箇所 url(‘../fonts/~)の相対パスを、サイトのフォルダ構成に合わせて変更します。

全部で6箇所あります。

2.フォントの表示指定

【HTML側で表示指定する場合】

<body>内に使いたいフォントのコードを貼り付けます。

【CSS側で疑似要素として表示する場合】

疑似要素のcontentに \(半角円マークか半角バックスラッシュ)の後に使いたいフォントのUnicode、
font-familyに‘ForkAwesome’を指定します。

3.表示完了

これで表示出来ます。
アイコンフォントの太さなどはcssで指定するだけで簡単に変えられます。

 

Font Awesome4.7以前から移行する場合

1.フォントの読み込み

【CDN利用の場合】

https://forkaweso.me/Fork-Awesome/get-started/

Font AwesomeのCDNを読み込んでいたコードを、上記ページの 「Use a CDN」 のコードと差し替えます。

※お使いのバージョンによってCDNコードは違います。

【ダウンロードして使っている場合】

Fork Awesomeからダウンロードしてきたzipファイルを解凍します。
中身のfontsフォルダと、
cssフォルダ内のfork-awesome.cssをサイトの任意の場所に設置します。

fork-awesome.cssのソースの下記コードのURL参照箇所 url(‘../fonts/~)の相対パスを、サイトのフォルダ構成に合わせて変更します。

全部で6箇所あります。

font-awesome.cssを読み込んでいた箇所のコードをfork-awesome.cssに変更します。

2.フォントの表示指定

【HTML側で表示指定している場合】

何も変更する必要はありません。

【CSS側で疑似要素として使っている場合】

疑似要素のfont-familyを‘FontAwesome’から‘ForkAwesome’に変更します。

3.移行完了

これだけで移行完了です。

まとめ

Font Awesome4.7以前からの移行が簡単で、非常に助かります。
オープンソースコミュニティなので管理者の方に感謝して利用していきたいと思います。
今後の発展が楽しみです。

 

Windows 7 の延長サポート終了まで

days
1
1
7
hours
0
7
minutes
2
2
seconds
0
0

Office 2010 の延長サポート終了まで

days
3
9
0
hours
0
7
minutes
2
2
seconds
0
0

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
    123
45678910
11121314151617
18192021222324
25262728   
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

U・Iターン転職しませんか?
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)