html - How to add Icon background within a container?

I have an example of what I want to achieve.

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="/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet"/>
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="/[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>

I have an example of what I want to achieve.

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/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr/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>

Share Improve this question edited Jan 18 at 15:45 David Aniebo 2833 silver badges10 bronze badges asked Jan 17 at 8:39 sirzento 7291 gold badge7 silver badges37 bronze badges

Instead of increasing the font size, give the icon some padding. – C3roe Commented Jan 17 at 8:48

Add a comment |

2 Answers 2

Sorted by: Reset to default 1

.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/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr/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>

You should define different styles for each size.

        .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);
            width: fit-content;
            height: fit-content;
            padding: 8px;
            font-size: 12px;
        }

        .toBig::before {
            font-size: 16px;
            padding: 2px;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body>
    <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>

</body>

</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How to add Icon background within a container? - Stack Overflow

2 Answers 2