如何在容器内添加图标背景？

问题描述 投票：0回答：2

我有一个我想要实现的目标的例子。

enter image description here

如您所见，右侧的药丸内有一个小刷新图标，有自己的颜色和背景颜色。我尝试使用 bootstrap 获得类似的东西，但我无法将背景设置为正确的大小，而不使图标元素本身对于容器来说太大。

这是我目前拥有的最接近的，但看起来不如示例图片中的那么好。可以用更好的 css 来解决这个问题，还是这些图标不适合这个目的？

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

html css twitter-bootstrap bootstrap-5
2个回答
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>

0
投票

您应该为每个尺寸定义不同的样式。

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

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.