Bootstrap Icons are not quadratic-CodePudding

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>

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;
}

Show code snippet

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>

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;
}