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.
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/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
sirzentosirzento
7291 gold badge7 silver badges37 bronze badges
1
- Instead of increasing the font size, give the icon some padding. – C3roe Commented Jan 17 at 8:48
2 Answers
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>