我正在使用Bootstrap 圖示。但是，我有一個問題：圖示字體通過將::before選擇器應用于i元素來作業。但是，雖然字體大小為 24 像素的圖示正好是 24 x 24 像素，但該i元素底部有一些額外的空間，我找不到解決此問題的方法。
這是一個帶有紅色邊框的示例。您可以檢查元素以查看選擇器本身的大小是否正確，但元素沒有。
body {
display: flex;
justify-content: center;
}
i {
font-size: 24px;
border: 1px solid red;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<i class="bi bi-plus-circle"></i>
</body>
</html>uj5u.com熱心網友回復：
如果您檢查 DOM，您會看到<i>的高度為 ，28px而圖示本身僅為24px。
為了確保元素的高度相同，我只需添加一個height與圖示相同的屬性，例如：
i {
font-size: 24px;
height: 24px;
border: 1px solid red;
}
顯示代碼片段
body {
display: flex;
justify-content: center;
}
i {
font-size: 24px;
height: 24px;
border: 1px solid red;
}
.bi::before {
vertical-align: 0px !important;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<i class="bi bi-plus-circle"></i>
</body>
</html>由于 Bootstraps 添加了以下 css：
vertical-align: -.125em;
圖示不會完美居中，我們可以通過添加來洗掉它
.bi::before {
vertical-align: 0px !important;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/337334.html
上一篇：通過偽元素在css檔案中使用圖示