laravel bladeにてBootstrap Iconsを使ってみる

概要

laravelのbladeにてBoobstrap Iconsを使う方法を簡単にまとめる。

※「laravelのbladeにて」と記述しているがCDNのリンクを読む方式を使うのでHTMLファイルでも同様のやり方でOK

前提

他のアイコン提供系サービスと同様にBootstrap Iconsも今回紹介するCDNリンク読み込みの他に、アイコンのファイルをサイトから人間の手でダウンロードしてプロジェクトファイルに設置して呼び出して使う方法や、npmを使ってアイコンをトランスパイルしてCDNリンク無しで使う方法などもある。

方法

任意のbladeファイルを用意する。
head要素内部に下記の記述を行う。

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

上記の記述をしたファイルと同様のbody要素内部に下記の記述を行う。

<i class="bi bi-search"></i>

アイコン（今回の場合虫眼鏡アイコン）が表示される。

class属性の属性値はアイコンによって異なり、下記で好みのアイコンの属性値を確認する事ができる。

付録

「手動ダウンロードで使う方法」と「npmを使う方法」を簡単にまとめておく。

手動ダウンロードで使う方法

1. https://icons.getbootstrap.com/ にアクセス

2. 好みのアイコンを探す

3. 好みのアイコンの詳細画面を開く

4. 「Download SVG」を押下してアイコンファイルを手動ダウンロード

   

5. laravelのpublicディレクトリ直下などに設置し、下記の様に呼び出して使用

   <img src="{{ asset('your_svg_file_path') }}">
   

npmを使う方法

1. resources/css/app.cssに下記のような記述を追記

   resources/css/app.css

   @import "bootstrap-icons/font/bootstrap-icons.css";
   

2. $ npm run devを実行

3. 下記のように呼び出して使用（使い方はCDNの呼び出しと一緒）

   <i class="bi bi-search"></i>