Search code examples
htmlcsstwitter-bootstrapbootstrap-5

How to add Icon background within a container?

I have an example of what I want to achieve.

enter image description here

As you can see, there is a little refresh icon inside that pill on the right-hand side with its own color and background color. I tried to get something like this with bootstrap but I just can't set the background to the right size without making the icon element itself way too large for the container.

This is the closest I currently have but that doesn't look nearly as good as in the example picture. Can this be fixed with better css or are those icon just not good for that purpose?

.buttonContainer {
    font-size: large;
}

.badge {
    font-weight: 500 !important;
    border-color: #adb5bd !important;
}

.icon {
    display: inline-block;
    border-radius: var(--bs-border-radius-pill) !important;
    background-color: lightgray;
    color: var(--bs-secondary);
}

.toBig {
    padding: 5px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<div class="buttonContainer">
<p>Background to small</p>
<span class="badge rounded-pill border text-dark">Test test test <i class="bi bi-tools icon"></i></span>

<span class="badge rounded-pill border text-dark">Test test test <i class="bi bi-arrow-repeat icon"></i></span>
</div>
<br/>
<br/>
<div class="buttonContainer">
<p>Background ok but icon itself to big</p>
<span class="badge rounded-pill border text-dark">Test test test <i class="bi bi-tools icon toBig"></i></span>

<span class="badge rounded-pill border text-dark">Test test test <i class="bi bi-arrow-repeat icon toBig"></i></span>
</div>

Solution 

  • .buttonContainer {
    font-size: large;
}

.badge {
    font-weight: 500 !important;
    border-color: #adb5bd !important;
    padding-right: calc(var(--bs-badge-padding-x) + 18px) !important;
    position: relative;
}
.icon {
    display: inline-block;
    border-radius: var(--bs-border-radius-pill) !important;
    background-color: lightgray;
    color: var(--bs-secondary);
}
.badge .icon {
    position: absolute;
    padding: 2px 2px 1px;
    right: 4px;
    top: 3px;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<div class="buttonContainer">

<span class="badge rounded-pill border text-dark">Test test test <i class="bi bi-arrow-repeat icon"></i></span>
</div>