css - 使用CSS在 Font Awesome 图标行之间创建空间

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>为要应用于元素的宽度和高度标记 block 元素。

参见 fiddle

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