создание пространства между шрифтом удивительные строки значков с css

Question

У меня есть часть выбора, где у меня есть несколько шрифтов Awesome icons, а у выбранного есть панель под ним. Это хорошо, пока у меня есть только один ряд значков. Когда у меня есть несколько строк, «выбранная полоса» больше не видна, так как значок под ней скрывает. Я не очень силен в 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; 
}