最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin3浏览0评论

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
Add a comment  | 

2 Answers 2

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>

发布评论

评论列表(0)

  1. 暂无评论