内容を入力してください。
本記事では、CSSのフレームワークとしても多くのWebサイトやWebアプリケーションにて使用されているBootstrapにおいて提供されています「Bootstrap Icons (アイコン) 」を活用する方法をご紹介させて頂いております。 アイコンを設定したいが、手短かに準備したいと考えている方へオススメ致します。
以下、公式ページです!!
✅ 「 Bootstrap icons 」 の活用方法が分かる
✅ サンプルページを用いて、動作の確認が出来る
Bootstrap icons とは??
公式ページ上では、以下のように説明されております。
フリー、高品質、オープンソース、そして1300以上のアイコンを持つアイコンライブラリです。SVG や SVG スプライト、Web フォントなど多様な方法で利用できます。Bootstrapと合わせても、合わせなくても使えます。
BootstrapというCSSフレームの一環として提供されているのであれば、Bootstrapをまずは理解しなくてはいけないのでは??と思われる方もいるかと思いますが、実は、Bootstrap自体を深く知らなくても使えてしまうものになります。
また、活用方法を理解することで、以下のような1300以上のアイコンを無料で利用できるようになりますので、是非とも使えるようになっていきましょう！
Bootstrap iconsの活用方法
ベースとなるHTMLファイルを準備
内容を入力してください。Boostrap iconsの使い方が分かったところで、実際にサンプルコードを用いながら、一緒に活用方法を確認していきましょう。
まずは、ベースとなるHTMLファイルを用意する必要がありますので、以下のコードをコピペして、作成してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boostrap_icons_sample</title>
</head>
<body>
<div class="main">
<p>アイコンテスト</p>
</div>
</body>
</html>CDNの読み込み
内容を入力してください。
bootstrap iconsを活用するためには、公式ページに掲載されているCDN(ウェブコンテンツをより効率的に配信できるよう設計されたネットワーク)をhead要素内で読み込んでいただく必要が御座います。
ベースのHTMLのhead要素へ以下を追加しましょう。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">実際にCDNの場所を確認したい方は、公式ページを開き、下の方にずっとスクロールして頂くと、次の画像と同じ場所があるので、CDNというタイトル見つけて、赤枠のものをコピーしましょう。
アイコンの使い方
CDNの読み込みも終わりましたら、実際にアイコンを使ってみましょう。
公式ページを開き、次のような検索欄を見つけて頂いたら、checkboxと入力します。 すると、該当するアイコンが表示されますので、黄緑の枠で囲ってます「check2-square」を選択しましょう。
アイコンの詳細ページが開いたかと思いますので、右側にある「Icon font」にあるコードをコピーしましょう。
早速コピーしたコードを作成したHTMLファイルに割り当てていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boostrap_icons_sample</title>
<!-- CDNの読み込み -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
<div class="main">
<!-- checkboxのアイコン -->
<!-- を用いて、横並びにした際のアイコンと文字の間の空白を配置してます。 -->
<i class="bi bi-check2-square"></i>
<p>アイコンテスト</p>
</div>
</body>
<!-- 以下、CSS -->
<style>
.main {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 150px;
background-color: rgb(255, 250, 210);
border:2px dashed pink;
}
i, span {
/* アイコンとフォントサイズを30pxにする */
font-size: 30px;
}
i {
/* アイコンの色を緑にする */
color: green;
}
</style>
</html>動作確認
内容を入力してください。
最後に、アイコンが表示されるか、動作の確認を行なっていきたいと思います。
以下のように表示されましたら完璧です。
併せてDEMOページも貼っておきますので、ご確認ください！
DEMO
まとめ
⇨フリー、高品質、オープンソース、そして1300以上のアイコンを持つアイコンライブラリ。 Bootstrapを知らない方でも利用が可能です。
⇨head要素内でを記述するだけで活用が可能になります。
コメント