I presume that you used the field "Link Class" of the menu item where you entered a font class like "fa fa-home". Because it's the class of the anchor <a> I would say the behavior is correct somehow and I would use an override.

Setting no image but fill the Image Class and use it in override as a SPAN class if no image provided.

Or maybe easier: CSS to force that only the ::before part of the <a> uses font-family: "Font Awesome 5 Free";.

As long as there is no specific setting "Icon Class" or something similiar I think any other solution in core would be just strange when a user defines a "Link Class"

You are a thousand times right. You must actually use Font Awesome 5. fa fa-homme> fas fa-home
How to put a small space to the right of the icon? One space is not enough.

@ReLater After checking, it works fine on Safari, but not Firefox or Chrome.

The CSS is clear here.

The HTML

<a href="/" class="fa fa-home" aria-current="page" tabindex="0">Home</a>

The CSS for <a> AND its ::before part

.fa, .fas, [class^="icon-"], [class*=" icon-"] {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

From my point of view your "Accueil" is not the same font-family like "Blog" (compare the lower ls.) Any browser falls back in another font-family in cases like this if it doesn't know what to do ;-)

@N6REJ as the icon expert can you maybe have a look here?

iirc you need to use just "fa-home" as the class and then make sure that there is a class which will still target the icon something like .mod-menu li [class^="fa-"]::before

its a css issue not anything really specific to fonts

Cosing as the pr #34658 should solve this issue