創建字體之間的空間真棒圖標行與css

Question

我有一個選擇部分，我有多個字體真棒圖標和選定的一個下面有一個酒吧。 只要我只有一排圖標，這樣就行了。當我有多行時，「選定的欄」不再可見，因爲下面的圖標隱藏了它。 我不是很強大的CSS，並嘗試了所有我能想到的填充和邊距，但沒有太大的成功。在附帶的jsfiddle中，您可以看到最後兩個圖標的選擇器，但不是第一個。

我應該添加到下面的CSS，以便我可以有多行圖標，仍然可以看到選擇欄？

.icon-picker { 
    border: 0px solid #000000; 
    margin-right: 5px; 
    width: 24px; 
    height: 24px; 
    background-color: #FFFFFF; 
    padding-bottom: 4px; 
} 

.selected { 
    border-left: 0px; 
    border-right: 0px; 
    border-top: 0px; 
    border-bottom: 2px solid #000000; 
} 

.icon-container { 
    display: inline-block; 
    vertical-align: middle; 
    padding-top: 4px; 
    padding-left: 15px; 
    max-width: 300px; 
} 

謝謝你的時間。

jsfiddle

Answer 1

您需要使<i>標籤的寬度和高度的塊元件被施加到所述元件。

見fiddle

.icon-picker { 
    border: 0px solid #000000; 
    display: inline-block; 
    margin-right: 5px; 
    width: 24px; 
    background-color: #FFFFFF; 
}