如何讓我的SVG顯示在沒有內容的<i>標記中？

Question

我想讓我的svg在我的<i>標記中顯示爲背景圖像。爲了與我的其他代碼保持一致，我使用了<i>標記。

如果我沒有在i標籤中包含任何內容，則svg background-image根本無法顯示。我已經嘗試設置<i>標籤的高度和寬度，並且該功能無效。我知道你可以用div來輕鬆做到這一點，但我正在努力使其與此相同。

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

嘗試設置高度之前加入display: inline-block;和寬度

.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; 
}