css - cssでフォントの素晴らしいアイコン行の間にスペースを作成する

Question

複数のフォントのAwesomeアイコンがあり、選択したアイコンの下にバーがある選択部分があります。アイコンが1行しかない限り、それは問題ありません。複数の行がある場合、下のアイコンが非表示になっているため、「選択したバー」が表示されなくなりました。私はCSSがあまり得意ではなく、考えられるすべてのパディングとマージンを試しましたが、あまり成功しませんでした. 添付の jsfiddle では、最後の 2 つのアイコンのセレクターを確認できますが、最初のアイコンのセレクターは確認できません。

複数行のアイコンを表示し、引き続きセレクター バーを表示できるようにするには、以下の 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