簡単にアニメーション設定が出来るアイコンフォント「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を指定します。

アイコンを囲む

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

アニメーションをつける

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

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

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

公式サイトが便利

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

まとめ

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

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

この記事を読んだ方はこちらも読まれています

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