MITライセンスで、Bootstrapを使っていなくても使用できるらしいので早速使ってみる。
手順1. Bootstrapのページに行く
https://icons.getbootstrap.com/
手順2. 表示したいアイコンを選択
画面をスクロールするとアイコンがズラッと並んでいるので、使いたいアイコンを選んでクリック。
手順3. HTMLをコピー
下の方の「Copy HTML」という箇所に書かれたコードをコピーする。
<svg>タグで囲まれているコードです。
手順4. 表示させたい箇所に貼り付ける
HTMLにぺたっと貼り付けたら簡単に表示されます！
See the Pen Bootstrap Icons by AlanSmithee21 (@alansmithee21) on CodePen.
手順5. 色やサイズを変更する
あとは、スタイルを整えます。
widthを150px
heightを150px
fillを#f00
に変更しました。
fill属性は塗り色の指定なので、#f00の赤色に変更されています。
See the Pen Bootstrap Icons Custom by AlanSmithee21 (@alansmithee21) on CodePen.
まとめ
「free icon」で探せばいっぱいでてくるけど、Bootstrap iconsはサクッと使えるので便利だなと思った。
このブログにもちょっとずつアイコン増やしたい。