CODEWITHSUNDEEP
cssfont-awesome
Rudi
Rudi

Reputation: 1587

creating space between font awesome icon rows with css

I've got a selection part where I have multiple font Awesome icons and the selected one has a bar underneath it. That goes alright as long as I only have 1 row of icons. When I have multiple rows the "selected bar" is not visible anymore as the icon underneath is hiding it. I'm not very strong in css and tried all the padding and margins I could think of but without much success. In the attached jsfiddle you can see the selector for the last two icons, but not for the first one.

What should I add to the css below so that I can have multiple rows of icons and still see the selector bar?

.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;
}

Thanks for your time.

jsfiddle

Upvotes: 0

Views: 12476

Answers (1)

anpsmn
anpsmn

Reputation: 7257

You need to make the <i> tag a block element for the width and height to be applied to the element.

See fiddle

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

Upvotes: 1

Related Questions