https://boxicons.com/

Boxiconsは、数多く公開されている他のsvgのアイコンフォントと同様にそれを利用するためのcssが同梱され、class指定するだけで簡単にアニメーションさせたり、反転や回転などの画像操作が可能です。合わせて公開されていているアイコンは数多くあります。Boxiconsもその一つで、簡単なcss指定だけで多くのアイコン表示が可能で、かつ商用フリーで利用できます。

  • アイコン（.svg）ファイル：CC 4.0　無料でダウンロード可
  • フォントファイル：SIL OFL 1.1（フリーソフトウェアライセンス）　帰属表示は必須ではない
  • フォントやアイコン以外のファイル：MITライセンス（寛容型オープンソースライセンス）

 

Boxiconsの設定

cssをインポート

head 部分に CDN で boxicons.css をインポートします。自分は少し前のバージョンのほうが使いやすいので、このページでは、バージョン 2.0.4 を利用します。 なお、2021年3月現在の最新は、バージョン 2.0.7です。

<link href="https://unpkg.com/boxicons@2.0.4/css/boxicons.min.css" rel="stylesheet">

ページにアイコンを設置

ページ上でアイコンを使用するには、cssのclassにアイコンであることを示す［bx］に続けて、タイプごとに通常のアイコンは［bx-］、ソリッドアイコンは［bxs-］、ロゴは［bxl-］というプレフィックスの後にアイコン名を指定します。

  • bx-book
  • bxs-book
  • bxl-twitter 
<ul>
 <li>bx-book <i class="bx bx-book bx-md"></i></li>
 <li>bxs-book <i class="bx bxs-book bx-md"></i></li>
 <li>bxl-twitter <i class="bx bxl-twitter bx-md"></i></li>
</ul>

アイコンのサイズ

サイズは、classに［bx-xs］、［bx-sm］、［bx-md］、［bx-lg］を指定します。

  • サイズ無指定 
  • bx-xs
  • bx-sm
  • bx-md
  • bx-lg 
<ul>
 <li>サイズ無指定&nbsp;<i class="bx bx bx-link-external"></i></li>
 <li>bx-xs <i class="bx bx-link-external bx-xs"></i></li>
 <li>bx-sm <i class="bx bx-link-external bx-sm"></i></li>
 <li>bx-md <i class="bx bx-link-external bx-md"></i></li>
 <li>bx-lg <i class="bx bx-link-external bx-lg"></i></li>
</ul>

アイコンのカラー

古いバージョンでは、:before擬似要素を使っていたようですが、現在はiタグに対して普通のcssで指定できます。

　 
<span style="color:green"><i class="bx bx bx-link-external bx-md"></i></span>

アイコンの向き

［bx-rotate-］というプレフィックスの後に右回り角度（90、180、270）を入れて指定します。また、［bx-flip-horizontal］で水平方向に反転、［bx-flip-vertical］で垂直方向に反転します。

  • 無指定
  • bx-rotate-90
  • bx-rotate-180
  • bx-rotate-270

  • bx-flip-horizontal
  • bx-flip-vertical 
<ul>
 <li>無指定 <i class="bx bxs-like bx-md"></i></li>
 <li>bx-rotate-90 <i class="bx bxs-like bx-md bx-rotate-90"></i></li>
 <li>bx-rotate-180 <i class="bx bxs-like bx-md bx-rotate-180"></i></li>
 <li>bx-rotate-270 <i class="bx bxs-like bx-md bx-rotate-270"></i></li>
 <li>bx-flip-horizontal <i class="bx bxs-like bx-md bx-flip-horizontal"></i></li>
 <li>bx-flip-vertical <i class="bx bxs-like bx-md bx-flip-vertical"></i></li>
</ul>

アイコンにボーダーを付ける

classに［bx-border］を追加して四角ボーダー、［bx-border-circle］を追加して円形ボーダーを表示します。

  • bx-border
  • bx-border-circle 
<ul>
 <li>bx-border <i class="bx bx-heart bx-md bx-border"></i></li>
 <li>bx-border-circle <i class="bx bx-heart bx-md bx-border-circle"></i></li>
</ul>

アイコンのアニメーション

classに［bx-spin］などを追加することで、アイコンをアニメーションさせることができます。

  • bx-spin
  • bx-tada
  • bx-flashing
  • bx-burst
  • bx-fade-right
  • bx-fade-left 
<ul>
 <li>bx-spin <i class="bx bx-md bx-loader bx-spin ma-r2"></i></li>
 <li>bx-tada <i class="bx bx-md bx-bell bx-tada ma-r20"></i></li>
 <li>bx-flashing <i class="bx bx-md bx-heart bx-flashing ma-r20"></i></li>
 <li>bx-burst <i class="bx bx-md bx-dice-5 bx-burst ma-r20"></i></li>
 <li>bx-fade-right <i class="bx bx-md bx-basketball bx-fade-right ma-r20"></i></li>
 <li>bx-fade-left <i class="bx bx-md bx-bullseye bx-fade-left ma-r20"></i></li>
</ul>

アイコンのホバー

classに［bx-spin-hover］などを追加することで、カーソルをアイコンに乗せたhover時にアニメーションと同じ動きをさせることができます。

  • bx-spin-hover
  • bx-tada-hover
  • bx-flashing-hover
  • bx-burst-hover

  • bx-fade-righ-hovert
  • bx-fade-left-hover 
<ul>
 <li>bx-spin-hover <i class="bx bx-md bx-loader bx-spin-hover ma-r2"></i></li>
 <li>bx-tada-hover <i class="bx bx-md bx-bell bx-tada-hover ma-r20"></i></li>
 <li>bx-flashing-hover <i class="bx bx-md bx-heart bx-flashing-hover ma-r20"></i></li>
 <li>bx-burst-hover <i class="bx bx-md bx-dice-5 bx-burst-hover ma-r20"></i></li><br>
 <li>bx-fade-righ-hovert <i class="bx bx-md bx-basketball bx-fade-right-hover ma-r20"></i></li>
 <li>bx-fade-left-hover <i class="bx bx-md bx-bullseye bx-fade-left-hover ma-r20"></i></li>
</ul>

アイコンをリストマークとして使う

ul要素にclass名［bx-ul］を指定します。

  • リスト101

  • リスト102

  • リスト103

  • リスト104

<ul class="bx-ul">
 <li><i class="bx bx-right-arrow"></i>リスト101</li><br>
 <li><i class="bx bx-x-circle"></i>リスト102</li><br>
 <li><i class="bx bx-plus"></i>リスト103</li><br>
 <li><i class="bx bx-sun"></i>リスト104</li>
</ul>

アイコンを使ってnavi風ボタンを作ってみました

<ul>
  <li><a href="#"><i class="bx bx-book bx-sm pl-t5"></i>&nbsp;button1</a></li>
  <li><a href="#"><i class="bx bx-heart bx-sm pl-t5"></i>&nbsp;button2</a></li>
  <li><a href="#"><i class="bx bx-basketball bx-sm pl-t5"></i>&nbsp;button3</a></li>
  <li><a href="#"><i class="bx bx-body bx-sm pl-t5"></i>&nbsp;button4</a></li>
  <li><a href="#"><i class="bx bx-bullseye bx-sm pl-t5"></i>&nbsp;button5</a></li>
 </ul>

 

 

 

↑

inserted by FC2 system