I’m using fluent icons through fonts and custom @font-faces. I’m using i tags to render the icons.

@font-face {
    font-family: "FluentIcons";
    src:
        url("font.woff2") format("woff2"),
        url("font.woff") format("woff"),
        url("font.ttf") format("truetype");
}

.fluent-icon:before {
    font-family: FluentIcons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.person_20_filled:before {
    content: "e000";
}

<i class="fluent-icon person_20_filled"></i>

However the i tag is taller than needed as you can see in this picture.

In fact, the :before element’s height is 40px while the i tag’s is 48.8px.
I want the i tag to match the height of the :before element.