Wie kann ich mein SVG im <i> Tag ohne Inhalt anzeigen lassen?

Question

Ich versuche, meine Svg als Hintergrundbild in meinem <i> Tag erscheinen zu lassen. Ich verwende den Tag <i> aus Gründen der Einheitlichkeit mit meinem anderen Code.

Wenn ich keinen Inhalt in das i-Tag einfügen, wird das Svg-Hintergrundbild überhaupt nicht angezeigt. Ich habe versucht, Höhe und Breite der <i> Tag und das hat nicht funktioniert. Ich verstehe, dass du das leicht mit einem div machen kannst, aber ich versuche es so zu machen.

HTML

<div class="card-panel"> 
    <i class="icon-advanced"></i> 
</div> 

CSS

.icon-advanced { 
    background: url('icon/icon-advanced.svg'); 
    background-repeat: no-repeat; 
    } 

Answer 1

Versuchen display: inline-block; bevor die Höheneinstellung und Breite

.icon-advanced { 
    background: url('icon/icon-advanced.svg'); 
    background-repeat: no-repeat; 
    background-size: cover; /* stretch the background to cover the whole element */ 

    /* 
     still inline, but has block features 
     meaning height and width can be set 
    */ 
    display: inline-block; 
    height: 20px; 
    width: 20px; 
}