ブートストラップアイコンライブラリをインストールして使用する方法は？

ブートストラップアイコンをインストールして使用するには、次の3つの方法があります。1。CDNを使用して、HTMLのヘッドにリンクを追加します。 2。NPMを介して、ReactやVueなどの最新のプロジェクトに適しています。 NPMインストールBootstrap-Iconsを実行してCSSをインポートする必要があります。 3. SVGファイルまたはフォントファイルを手動でダウンロードしてインポートします。それを使用する場合、BIおよびアイコン名クラス（Bi-Heartなど）を追加してアイコンを挿入できます。 Spanなどの他のインライン要素を使用することもできます。パフォーマンスとカスタマイズ機能を向上させるために、SVGファイルを使用することをお勧めします。 BI-LG、Bi-2X、その他のクラスを介してサイズを調整し、テキストダンガーやカスタムCSSなどのブートストラップテキストクラスを使用して色を変更できます。ベストプラクティスには、公式アイコン名をチェックし、Aria-hidden = "true"を装飾アイコンに追加し、AriaタグまたはSRのみのテキストをセマンティックアイコンに追加します。

ブートストラップアイコンのインストールと使用はシンプルで柔軟です。CDN、NPM経由で追加するか、ファイルを直接ダウンロードできます。プロジェクトで開始して使用する方法は次のとおりです。

✅1。ブートストラップアイコンをインストールします（1つのメソッドを選択してください）

ブートストラップアイコンを使用するためにフルブートストラップフレームワークは必要ありません。これらを含める最も一般的な方法は次のとおりです。

オプションA：CDNを使用します（基本的に使用するために最速）

HTMLファイルの内部にこの<link>タグを追加します。

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

action迅速なプロトタイプまたはシンプルなWebサイトに最適です。セットアップは必要ありません。

オプションB：NPM経由でインストール（最新のWebプロジェクト用）

プロジェクトディレクトリでこのコマンドを実行します。

 NPMインストールBootstrap-Icons

次に、メインのスタイルシートまたはJSエントリファイルにCSSをインポートします（ビルドセットアップに依存します）：

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

react React、Vue、またはWebpackベースのアプリに最適です。

オプションC：SVGまたはフォントをダウンロード（手動制御）

Go to //m.sbmmt.com/link/adad0f2b196a1ed3e3b9d9025c397132 , click "Download" or go to the GitHub repo ( //m.sbmmt.com/link/16b872fc557900838e19f750151167e4 ) and downloadアイコンファイル。

個々のSVGを使用するか、フォントセット全体を手動で含めることができます。

✅2。ブートストラップアイコンの使用方法

インストールしたら、いくつかの方法でアイコンを使用できます。

方法1： <i>タグの使用（アイコンに推奨）

ブートストラップアイコンは、 biクラスをベースとして使用し、その後にbi-icon-nameを使用します。

 <i class = "bi bi-heart"> </i>
<i class = "bi bi-arrow-right"> </i>
<i class = "bi bi-house-fill"> </i>

公式ドキュメントの正しいアイコン名を必ず使用してください： https：//m.sbmmt.com/link/adad0f2b196a1ed3e3b9d9025c397132

方法2：他の要素を使用

クラスを任意のインライン要素に適用できます。

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

セマンティックHTML標準に適合しない場合<i>役立ちます。

方法3：個々のSVGファイルを使用します（パフォーマンスとカスタマイズに最適）

SVGをダウンロードまたはインポートした場合、それらを直接使用できます。

 <svg class = "bi" width = "32" height = "32" fill = "currentColor">
  <xlink：href = "node_modules/bootstrap-icons/bootstrap-icons.svg＃heart"/>
</svg>

この方法は、CSSを介して色/サイズのバンドルと変更に最適です。

✅3。アイコンのカスタマイズ（サイズ、色など）

組み込みクラスを使用してサイズを変更します：

 <i class = "bi bi-star"> </i> <！ -  default->
<i class = "bi bi-star bi-lg"> </i> <！ -  varge->
<i class = "bi bi-star bi-2x"> </i> <！ -  2x size->
<i class = "bi bi-star bi-3x"> </i> <！ -  3x size->

テキストユーティリティで色を変更します（ブートストラップCSSを使用する場合）：

 <i class = "bi bi-bell text-danger"> </i>
<i class = "bi bi-bell text-success"> </i>

またはカスタムCSSで：

 .bi {
  色：＃0D6EFD;
  フォントサイズ：2REM;
}

✅4。ヒントとベストプラクティス

• 正しい名前がないか、必ず公式のアイコンライブラリを確認してください。
• バンドリングしていない場合は、SVGスプライトを介して多くのアイコンを使用しないでください。負荷時間が遅くなる可能性があります。
• アクセシビリティについては、アイコンが装飾的な場合はaria-hidden="true"を追加します。

   <i class = "bi bi-download" aria-hidden = "true"> </i>

• アイコンが意味を伝えている場合（例：「削除」）、適切なAriaラベルまたはsr-onlyテキストを使用します。

---

基本的に、CSSを含めるだけで、 bi bi-[icon-name]を使用します。それは軽量で、十分に文書化されており、どこでも機能します。フレームワークは必要ありません。

以上がブートストラップアイコンライブラリをインストールして使用する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。