Icon fonts give margin between icon and text

Question

I'm not a css pro. I want to give margin between icon and text. I tried this way. But results not similar to what i expected.

.user-details i{
  margin: 0 10px 0 -2px;
}

enter image description here

I want same space between icon and text.

Yes. Is there any way to make this space similar. I have seen some similar approaches — Dushan, Nov 05 '14 at 10:44
Try with `display:inline-block;min-width: [width-of-largest-icon]px`. — Vucko, Nov 05 '14 at 10:45

score 2 · Accepted Answer · edited May 23 '17 at 12:13

2

As I said in the comment, you can add :

.user-details i{
    margin: 0 10px 0 -2px;
    display: inline-block; /* so min-width can be used */
    min-width: [width-of-largest-icon]px;
}

Also, don't forget about inline-block whitespace.

edited May 23 '17 at 12:13

Community

1
1

answered Nov 05 '14 at 10:59

Vucko

20,555
10
56
107

score 0 · Answer 2 · answered Nov 05 '14 at 11:01

Dushan, when i see your icon list picture, I would like to suggest u try other two methods

:before :after methods

or

background:url(background-icon-image.jpg) -10px 0px no-repeat; The -10px 0px are background-position attributes, which Specifies the position of the background images personally i used this one very often to align icons;

Icon fonts give margin between icon and text

2 Answers2