Html Question posted in
Some basic documentation can be found here.

Html – How to add Icon background within an container?

I have an example 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 site that has its own color and background color. I tryed 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 to 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>
Tags:

2

Answers


  1. 0 
    .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>
    Login or Signup to reply.
  2. 0

    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.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>
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search