「Font Awesome」の代わりに使用することにしました。
Bootstrap Icons · Official open source SVG icon library for Bootstrap
方法1：CDNを使う
<head>〜</head>の間に下記のコードを貼り付けます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">方法2：埋め込みで使う
コードを貼り付けるのみで使えます。
上記の「矢印」のコードはこちら。
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
</svg>方法3：ダウンロードして使う
公式サイト Bootstrap Icons からダウンロードして使います。
Bootstrap IconsをCSSの疑似要素で使う方法
アイコンフォントの形式で先に使いたいフォントを読み込みます。
<i class="bi-alarm"></i>ブラウザのデベロッパーツールでアイコン番号を調べます。
アラームのアイコンの場合は content: “\f102”; です。
【HTML】
<span class="bi-alarm">アラーム</span>
【CSSの記述】
.bi-alarm::before {
content: "\f102";
font-family: bootstrap-icons;
font-weight: 400;
font-size: 1rem;
}この方法は公式ページには書かれていないため、今後アイコン番号やフォント名等が変更になる可能性があります。
使用する場合はCDNではなく、ダウンロードでの使用がおすすめです。