I am using the Bootstrap Icons. However, I have one problem: The icon font works by appying a ::before
selector to an i
element. But while an icon with a font size of 24 pixels is exactly 24 by 24 pixels, the i
element has some extra space on the bottom, and I cannot find a way to fix this.
Here is an example with a red border. You can inspect the element to see that the selector itself has the right size, but the element not.
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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
If you inspect the DOM, you'll see that the <i>
has a height of 28px
while the icon itself is only 24px
.
To ensure the element is the same height, I'd just add a height
property, the same as the icon, for example:
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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
Since the Bootstraps adds the following css:
vertical-align: -.125em;
The icons won't be centert perfectly, we can remove that by adding
.bi::before {
vertical-align: 0px !important;
}