{GLYPH} + bootstrap5 and icon size

[Jimmi08]

Bug Description

Some icons have different sizes

This is code from cookbook plugin

    <ul class="fa-ul">
        <li>{GLYPH: type=fa-cutlery&class=fa-li} {COOKBOOK_CATEGORY_NAME: type=link}</li>
        <li>{GLYPH: type=fa-users&class=fa-li} {COOKBOOK_RECIPE_PERSONS}</li>
        <li>{GLYPH: type=fa-clock-o&class=fa-li} {COOKBOOK_RECIPE_TIME}</li>
        <li>{GLYPH: type=fa-tags&class=fa-li} {COOKBOOK_RECIPE_KEYWORDS}</li>
        <li>{GLYPH: type=fa-trophy&class=fa-li} {COOKBOOK_RECIPE_AUTHORRATING: type=stars}</li>
        <li>{GLYPH: type=fa-toolbox&class=fa-li} {COOKBOOK_RECIPE_DIFFICULTY: type=stars}</li>
        <li>{GLYPH: type=fa-user&class=fa-li} {COOKBOOK_RECIPE_AUTHOR}</li>
        <li>{GLYPH: type=fa-calendar-alt&class=fa-li} {COOKBOOK_RECIPE_DATE}</li>
    </ul>

But result is

and the reason is core CSS - e107.css

/* FontAwesome Shims */
.svg-inline--fa.fa-w-16         { width:1em }

After deleting, it looks correct:

you shouldn't change in core so general class or there are others too

class="svg-inline--fa fa-utensils fa-w-13 fa-li"
class="svg-inline--fa fa-users fa-w-20 fa-li"
class="svg-inline--fa fa-clock fa-w-16 fa-li"
class="svg-inline--fa fa-tags fa-w-20 fa-li"
class="svg-inline--fa fa-trophy fa-w-18 fa-li"
class="svg-inline--fa fa-toolbox fa-w-16 fa-li"
class="svg-inline--fa fa-user fa-w-14 fa-li"

@Moc Thanks

[Moc]

It may also be because of missing information (author rating and keywords). So not sure this is a core issue.

[Jimmi08]

@Moc
Other icons are:

.svg-inline--fa.fa-li {
    width: 2em;
}

that line in e107.css is changing the width of fa-w-16 icons only.