DEV Community

Cover image for Bootstrap 5.0 Buttons with Icon and Text
Be Hai Nguyen
Be Hai Nguyen

Posted on

35

Bootstrap 5.0 Buttons with Icon and Text

In this post, we discuss how to use Bootstrap 5.0 icon CSS with Bootstrap CSS to create buttons with icon and text, and buttons with icon and no text.

Bootstrap provides free, high quality, open source icon library with over 1,600 icons. Please see https://icons.getbootstrap.com/, this page lists available icons and their names. We'll use these icon names to display the actual icons.

Toward the bottom of the page, under the Install section, we'll find the download button and CDN link to bootstrap-icons.css.

To create a button with icon using Bootstrap 5.0:

<button type="button" class="btn btn-primary btn-sm"><span class="bi-ICON-NAME"></span>&nbsp;BUTTON-TEXT</button>
Enter fullscreen mode Exit fullscreen mode

Replace ICON-NAME with a name listed in the page mentioned above, and of course BUTTON-TEXT with an appropriate label. For example:

<button type="button" class="btn btn-secondary"><span class="bi-search"></span>&nbsp;Search</button>
Enter fullscreen mode Exit fullscreen mode

Please note, in the above example, I don't use Bootstrap CSS btn-sm.

To create a button with only an icon and no text, simply remove the label:

<button type="button" class="btn btn-secondary"><span class="bi-search"></span></button>
Enter fullscreen mode Exit fullscreen mode

I've created a simple HTML page which shows a few buttons which I'm using in my project:

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="canonical" href="https://icons.getbootstrap.com/">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Bootstrap Icons CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" rel="stylesheet">
    <title>Bootstrap Icons</title>
</head>

<body>
    <button type="button" class="btn btn-primary btn-sm"><span class="bi-plus-square-fill"></span>&nbsp;Add</button>
    <button type="button" class="btn btn-secondary"><span class="bi-search"></span>&nbsp;Search</button>
    <button type="button" class="btn btn-danger"><span class="bi-trash"></span>&nbsp;Delete</button>
    <br/><br/>

    <button type="button" class="btn btn-primary"><span class="bi-plus-square-fill"></span></button>
    <button type="button" class="btn btn-secondary btn-sm"><span class="bi-search"></span></button>
    <button type="button" class="btn btn-danger"><span class="bi-trash"></span></button>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

The live URL of the example page: https://behai-nguyen.github.io/demo/042/bootstrap-5-button-icon.html

bootstrap-icons.css uses two font files:

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?8d200481aa7f02a2d63a331fc782cfaf") format("woff2"),
url("./fonts/bootstrap-icons.woff?8d200481aa7f02a2d63a331fc782cfaf") format("woff");
}
Enter fullscreen mode Exit fullscreen mode

These two font files are part of the download. I believe we can include them in our own applications -- but please do your own investigations before you redistribute them.

I did enjoy looking at how to do this... these two Bootstrap CSS libraries work together seamlessly. Thank you for reading, and I hope you find this post useful. Stay safe as always.

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (2)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay