Bootstrap Iconsチートシートを作成しました。│関東・名古屋・福岡のホームページ制作会社│アイエムワークス株式会社

070-2017-3870 無料相談・お見積り

BLOG

開発者ブログ

Bootstrap Iconsチートシートを作成しました。

こんにちは。
先日、Bootstrao Iconの使い方を紹介したのですが、PhotoshopやAdobe XD、Figmaでのデザインにアイコンを挿入する方法がすごく非効率と思い、即席ではありますがチートシートを作成したので紹介します。

Bootstrap Iconチートシート

2024/11/16更新　日本語検索を修正しました

作成に至った経緯
チートシートの使い方
- 検索
- 各ボタンの解説
まとめ

作成に至った経緯

アイエムワークスでは、PhotoshopとFigmaでWebデザイン制作を行う事が多くまた、Bootstrapを扱う機会が多いです。アイコンはFont Awesome + 自作で対応しています。

先日、ブログでBootstrap Iconを紹介させて頂いたのですが、以前見た時と比べてアイコンのラインナップが豊富になっていたのと、Bootstrapとの相性も良さげなので、実務で取り入れようと考えました。

しかし、今までFont Awesomeを使っていたのか、Bootstrap Iconのデザイン段階での使い勝手がものすごく悪く感じ、なんとか簡単に導入することが出来ないかと考え作成に至りました。

Bootstrap Iconチートシート

チートシートの使い方

検索

チートシートに、本家にはない検索機能を設けました。

即席制作なので、キーワードのマッチングが微妙なアイコンもあるかと思いますが、英語、日本語両方に対応しています。

キーワードマッチングはおいおい調整していきますね！
英語での検索ならバッチリなはず…

各ボタンの解説

アイコンのカードには5つのボタンが設置されています。
詳細は以下の通りです。

T：PhotoshopやFigmaで扱えるUnicodeデータをコピーできます。
HTMLマーク：アイコンのHTMLデータがコピーできます。
SVGマーク：アイコンのSVGデータがコピーできます。
ダウンロード：SVG形式のデータがダウンロードできます。
B：本家サイトにリンクします。

Tマーク

//コピー結果


文字化けしていますが、これであってます。
実際にPhotoshopにペーストした絵が以下です。

Photoshopなどのグラフィックソフトでアイコンを表示させる方法はこちらで解説しています。

HTMLマーク

HTMLマークをクリックしてコピーした内容は以下です。

<i class="bi bi-emoji-kiss-fill"></i>

スタイルシートを読み込んで使用する際はこちら。
コピーしてそのままHTMLに埋め込めます。

SVGマーク

SVGマークをクリックしてコピーした内容は以下です。

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-kiss-fill" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M16 8a8 8 0 1 0-2.697 5.99c-.972-.665-1.632-1.356-1.99-2.062-.388-.766-.419-1.561-.075-2.23.496-.97 1.73-1.466 2.762-1.05.65-.262 1.38-.162 1.957.19Q16 8.425 16 8M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m1.512 3.647c-.347.08-.737.198-1.107.319a.5.5 0 1 1-.31-.95c.38-.125.802-.254 1.192-.343.37-.086.78-.153 1.103-.108.16.022.394.085.561.286.188.226.187.497.131.705a1.9 1.9 0 0 1-.31.593q-.115.16-.275.343.16.186.276.347c.142.197.256.397.31.595.055.208.056.479-.132.706-.168.2-.404.262-.563.284-.323.043-.733-.027-1.102-.113a15 15 0 0 1-1.191-.345.5.5 0 1 1 .31-.95c.371.12.761.24 1.109.321q.264.062.446.084a6 6 0 0 0-.502-.584.5.5 0 0 1 .002-.695 5.5 5.5 0 0 0 .5-.577 5 5 0 0 0-.448.082m.766-.086-.006-.002zm.002 1.867-.005.001.006-.002Zm.157-4.685a.5.5 0 0 1-.874-.486A1.93 1.93 0 0 1 10.25 5.75c.73 0 1.356.412 1.687 1.007a.5.5 0 1 1-.874.486.93.93 0 0 0-.813-.493.93.93 0 0 0-.813.493M14 9.828c1.11-1.14 3.884.856 0 3.422-3.884-2.566-1.11-4.562 0-3.421Z"/> </svg>

SVGスプライトや、CSS内で使用する際はこちらが便利です。