Bootstrap Icons

Post by **C0D3D** »

Including Bootstrap icons in a web page

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Including Bootstrap Icons in HTML</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
    <h1 class="m-4"><i class="bi-globe"></i> Hello, world!</h1>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Including font-awesome icons in Bootstrap

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Including Font Awesome Icons in Bootstrap</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <h1 class="m-4"><i class="fa fa-globe"></i> Hello, world!</h1>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Placing icons inside buttons in Bootstrap

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Buttons with Icons</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
    <div class="m-4">
        <button type="submit" class="btn btn-primary"><span class="bi-search"></span> Search</button>
        <button type="submit" class="btn btn-secondary"><span class="bi-search"></span> Search</button>
    </div>
 
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Using icons inside tabs in Bootstrap

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tabs with Icons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <nav class="nav nav-tabs">
        <a href="#" class="nav-item nav-link active">
            <i class="bi-house-door"></i> Home
        </a>
        <a href="#" class="nav-item nav-link">
            <i class="bi-person"></i> Profile
        </a>
        <a href="#" class="nav-item nav-link">
            <i class="bi-envelope"></i> Messages
        </a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">
            <i class="bi-bar-chart"></i> Reports
        </a>
    </nav>
</div>
</body>
</html>

Using icons inside pills nav in Bootstrap

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Pills Nav with Icons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <nav class="nav nav-pills">
        <a href="#" class="nav-item nav-link active">
            <i class="bi-house-door"></i> Home
        </a>
        <a href="#" class="nav-item nav-link">
            <i class="bi-person"></i> Profile
        </a>
        <a href="#" class="nav-item nav-link">
            <i class="bi-envelope"></i> Messages
        </a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">
            <i class="bi-bar-chart"></i> Reports
        </a>
    </nav>
</div>
</body>
</html>

Using icons inside list groups in Bootstrap

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap List Group with Linked Items</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="list-group w-50">
        <a href="#" class="list-group-item list-group-item-action active">
            <i class="bi-house-fill"></i> Home
        </a>
        <a href="#" class="list-group-item list-group-item-action">
            <i class="bi-camera-fill"></i> Pictures
            <span class="badge rounded-pill bg-primary float-end">145</span>
        </a>
        <a href="#" class="list-group-item list-group-item-action">
            <i class="bi-music-note-beamed"></i> Music
            <span class="badge rounded-pill bg-primary float-end">50</span>
        </a>
        <a href="#" class="list-group-item list-group-item-action">
            <i class="bi-film"></i> Videos
            <span class="badge rounded-pill bg-primary float-end">8</span>
        </a>
    </div>
</div>
</body>
</html>

Using icons inside input groups in Bootstrap

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Prepend and Append Inputs</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="row g-2">
        <div class="col-6">
            <div class="input-group">
                <span class="input-group-text">
                    <span class="bi-person"></span>
                </span>
                <input type="text" class="form-control" placeholder="Username">
            </div>
        </div>
        <div class="col-6">
            <div class="input-group">            
                <input type="text" class="form-control" placeholder="Amount">
                <span class="input-group-text">.00</span>
            </div>
        </div>
        <div class="col-6">
            <div class="input-group">
                <span class="input-group-text">https://www.</span>
                <input type="text" class="form-control" placeholder="Domain name">
            </div>
        </div>
        <div class="col-6">
            <div class="input-group">
                <span class="input-group-text">$</span>
                <input type="text" class="form-control" placeholder="US Dollar">
                <span class="input-group-text">.00</span>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Bootstrap Icons

Bootstrap Icons

Who is online