簡単にアニメーション設定が出来るアイコンフォント「Boxicons」

2019/12/10 What's Up, サイト制作, 技術系 投稿者:竹内

boxicons

簡単にアニメーション設定が出来るアイコンフォント「Boxicons」というものがありましたので試してみたいと思います。

今回紹介するアイコンフォント「Boxicons」は、class指定で簡単に回転や反転、アニメーションの設定ができます。
MITライセンスですので商用利用も可能です。

使い方

公式サイトを参考にCSSとHTMLを設定していきます。

公式サイト:https://boxicons.com/

CSSを読み込む

公式サイトの通りにHTMLのhead領域にCSSを読み込みます。

HTML

HTMLでアイコンフォントを設定します。
「bx-」がレギュラーアイコン、「bxs-」でソリッドアイコン、「bxl-」がロゴアイコンとなります。

サイズや回転、アニメーションを設定する

サイズ

class指定でサイズの変更ができます。

回転と反転

class指定で回転(rotate)と反転(flip)の設定ができます。

リストアイコンとして使う

リストアイコンとして使う場合は「ul」タグに「bx-ul」のclassを指定します。

  • リスト1
  • リスト2
  • リスト3

アイコンを囲む

アイコンを四角か丸で囲むことができます。

アニメーションをつける

class指定で簡単にアニメーションをつけることができます。

マウスホバー時にアニメーションする

↓ マウスカーソルをのせるとアニメーションします。

公式サイトが便利

公式サイトでは、使いたいアイコンを選択し、色の設定、アニメーション方法などを試して、設定したものがそのままコピーできるソースが生成されるのでとても便利です。
また、PNGやSVGでダウンロードすることもできます。CSSを読み込まずにHTML単体で使えるコードも生成されるようですが、その場合はアニメーションが動かないようですのでご注意ください。

boxicons

まとめ

アイコンフォントといえば「Font Awesome」や「Fork Awesome」が主流ですが、「Boxicons」もなかなか使い勝手がよく、個人的にこれから使っていきたいと思います。

2019年12月現在1,200以上のアイコンが登録されており、大体の用途に使えると思いますし、簡単にアニメーションさせることができるのが最大の特徴です。
注意事項やダウンロードボタンなど重要な箇所に動きのあるアイコンを使うことでUIの改善に繋がるのではないでしょうか?
また、SNSを頻繁に更新しているようなサイトではSNSアイコンを目立たせて誘導するのも良いでしょう。
※動きのあるものは目を引くと思いますが使い過ぎには注意が必要です。

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

days
1
9
0
hours
0
8
minutes
0
3
seconds
2
1

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
3031     
     12
3456789
10111213141516
17181920212223
242526272829 
       
      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    
       
     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(エニューム)