Vertikaler Align: Middle ist mit Inline-SVG-Symbol vollständig ausgeschaltet ⇐ HTML

[Anonymous]

Es fällt mir sehr schwer, svg-Symbole mit Text vertikal zu zentrieren: < /p>


.text {
display: inline;
vertical-align: middle;
font-size: 42px;
line-height: 42px;
font-family: "Montserrat";
font-weight: 900;
}

.icon {
display: inline;
vertical-align: middle;
line-height: 42px;
}

svg {
width: 16px;
height: 16px;
display: inline;
vertical-align: middle;
}< /code>

Code: Select all

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Siehe das Ergebnis hier: https://codepen.io/orbert91/pen/rangmjw< src = "https://i.static.net/acxu2v8j.png"/>
Das Symbol ist vollständig ausgeschaltet. Was fehlt ich mit vertikaler Align ? Ist dieses CSS -Attribut nur mit SVGs unterbrochen?
Beachten>