Bootstrap5のボタンをそのまま使用するのではなく、アイコンをつけたい場合もCSSコードを追加することなく実装可能です。
このページではボタンにアイコンを追加・変更する方法を紹介します。
ボタンにSVGアイコンを追加する
Webサイトに設置したボタンなどにSVGアイコンを追加するには、まずSVGコードを取得する必要があります。
アイコンギャラリーサイトではSVGコードを取得できるところもたくさんあるのでそちらで取得するのが簡単です。
アイコンギャラリーサイトはたくさんあるのでデザインにあったところを選ぶことができます。おすすめなのはこちらのBootstrapアイコン。
こちらのアイコンはアイコンフォントとしても使える上に完全無料なのでどんなサイトにも使えます。
詳しい使い方はこちらの記事をご覧ください。
HTMLコードにアイコンをコピーする
Bootstrap5のアイコンサイトから取得したアイコンをコピーします。例としてBootstrap5のボタンコンポーネントにアイコンを追加してみます。
<!-- 追加前 -->
<button type="button" class="btn btn-primary">Base class</button>
<!-- 追加後 -->
<button type="button" class="btn btn-primary">
Base class
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
</svg>
</button>このボタンをブラウザで表示してみるとこちらのようになります。
このままだとテキストとアイコンがくっついているので、アイコンだけを右端に表示したい場合はレイアウトを調子する必要があります。
ボタンに追加したSVGアイコンの位置を調整する
ボタンとアイコンの位置を調整する方法はいくつかのパターンがあります。
- テキストとアイコンを両端に揃える
- テキストを中央揃えにしてアイコンを右端に揃える
それぞれサンプルコード付きで詳しく解説します。
テキストとアイコンを両端に揃える
ボタンのテキストとアイコンを両端に揃えたい場合は、HTMLのClassにBootstrap5のjustify-content-betweenをつければOK。
これはFlexboxのプロパティで、子要素を親要素の幅に合わせて均等配置することができます。
<button type="button" class="btn btn-primary d-flex justify-content-between align-items-center" style="width: 150px;">
Base class
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
</svg>
</button>これだけで両端に揃えることができます。
ボタンのサイズやテキストサイズが変わっても同じように両端に配置されます。
テキストを中央揃えにしてアイコンを右端に揃える
テキストだけ中央に表示して、アイコンを右端に表示する場合は少しやり方が変わります。
ボタンのサイズが変わってもテキストは中央に配置して、アイコンは右端から10pxの位置に表示したい場合は次のようになります。
<a class="position-relative d-inline-flex align-items-center bg-dark text-white fs-text-sm fw-bold py-15 px-60" href="#">
詳しくはこちら
<svg class="position-absolute top-50 end-0 translate-middle-y me-20" width="8" height="14" viewBox="0 0 10 16" xmlns="http://www.w3.org/2000/svg">
<path d="M0.756187 13.6572L2.17019 15.0712L9.24219 8.0012L2.17019 0.929199L0.756187 2.3432L6.41319 8.0002L0.756187 13.6572Z" fill="white"/>
</svg>
</a>
WEB-UIKITのボタンコンポーネントでも同じ方法で実装しています。
ボタンに画像のアイコンを追加する
ボタンに画像のアイコンを追加・変更する場合も基本的にはSVGアイコンと同じです。
画像のアイコンはFigmaやPhotoshopでデザインしたものをpngやsvg画像で書き出して使うことが多いと思います。
画像アイコンの場合は高さと幅を指定するのを忘れないようにしましょう。
<button type="button" class="btn btn-primary d-flex justify-content-between align-items-center">
ボタン
<img src="./arrow.png" style="width: 20px;height: 20px;" alt="">
</button>両端揃えやテキストのみ中央揃えも同じやり方で実装可能です。
<button type="button" class="btn btn-primary position-relative d-flex justify-content-center" style="width: 150px;">
ボタン
<img class="position-absolute top-50 end-0 translate-middle-y me-1" src="./arrow.png" style="width: 20px;height: 20px;" alt="">
</button>表示はこんな感じなります。
まとめ
WEB-UIKITにあるテンプレートでもアイコンを使ったボタンコンポーネントを使っています。
Bootstrap5があればCSSコードを書くことなくボタンのコーディングができるためコピペでWebサイトを構築することができます。