css - 使用 css 在字体真棒图标行之间创建空间

Question

我有一个选择部分，其中有多个字体 Awesome 图标，并且选定的图标下方有一个栏。只要我只有 1 行图标就可以了。当我有多行时，“选定栏”不再可见，因为下面的图标正在隐藏它。我在 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>标签成为块元素，以便将宽度和高度应用于元素。

见小提琴

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