概要

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を使う方法」を簡単にまとめておく。

https://icons.getbootstrap.com/ にアクセス
好みのアイコンを探す
好みのアイコンの詳細画面を開く
「Download SVG」を押下してアイコンファイルを手動ダウンロード
laravelのpublicディレクトリ直下などに設置し、下記の様に呼び出して使用
```
<img src="{{ asset('your_svg_file_path') }}">
```

resources/css/app.cssに下記のような記述を追記
resources/css/app.css
```
@import "bootstrap-icons/font/bootstrap-icons.css";
```
$ npm run devを実行
下記のように呼び出して使用（使い方はCDNの呼び出しと一緒）
```
<i class="bi bi-search"></i>
```