06Bootstrap Icons
Bootstrap Iconsは、Bootstrapの公式アイコンライブラリであり、ウェブサイトやウェブアプリケーションで使用できる数百種類のオープンソースのアイコンが含まれています。
これにより、デザインの統一感を保ちながら、必要なアイコンを簡単に追加することができます。
Bootstrap Iconsの特徴
豊富なアイコン
何百種類ものアイコンが提供されており、さまざまな用途に対応しています。例えば、ナビゲーションバーのアイコン、ボタンのアイコン、通知アイコンなどがあります。
カスタマイズ可能
アイコンのサイズや色を簡単にカスタマイズできます。CSSを使って自由にスタイルを変更できるので、プロジェクトのデザインに合わせて調整が可能です。
軽量
アイコンはSVG形式で提供されており、ファイルサイズが小さいため、ページの読み込み速度にほとんど影響を与えません。
Bootstrap Iconsの使用方法
CDN経由での利用
Bootstrap Iconsを利用する最も簡単な方法は、CDN経由でアイコンライブラリを読み込むことです。以下のコードをHTMLファイルの<head>セクションに追加します。
アイコンの追加
アイコンを追加するには、<i>タグを使用し、クラスにアイコン名を指定します。例えば、家のアイコンを追加する場合は以下のようになります。
<i class="bi bi-house"></i>【サンプルコード】
以下は、Bootstrap Iconsを使ったシンプルな例です。ナビゲーションバーに家のアイコンと検索アイコンを追加しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Icons Example</title>
<!-- Bootstrap CSSの読み込み -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Iconsの読み込み -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<i class="bi bi-house"></i> Home
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-search"></i> Search
</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<h1>Welcome to Bootstrap Icons!</h1>
<p>Here is an example of using Bootstrap Icons.</p>
</div>
<!-- Bootstrap JavaScriptの読み込み -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
左上に家のアイコンが、右上には検索の虫眼鏡のアイコンが表示されていますね。
このように、タグを追加するだけで簡単にアイコンを表示させることができるのがBootstrap Iconsの強みです。
コメントを残す