字体真棒图标之间的间距

我想清除这个jsfiddle中fa图标（带背景）之间令人讨厌的间距。字体真棒图标之间的间距

我尝试了保证金和字间距，但没有奏效。

图标容器的CSS：

.home-header-sm { 
    text-align: right; 
    margin-right: 20px; 
    font-size: 20px; 
    word-spacing: 0px; 
} 

.home-header-sm a, 
.home-header-sm a:visited, 
.home-header-sm a:hover, 
.home-header-sm a:active { 
    color: #FFFFFF; 
} 

.fa { 
    text-align: center; 
    border-style: solid; 
    background-color: #ffffff; 
    color: #1D233D; 
    width: 30px; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    margin: 0px 0px 0px 0px !important; 
}

来源

2016-04-22 Pro Haitham

你的图标已经有图标之间的空间那么问题是什么？ –

如果我理解正确，在这种情况下必须删除空格:) – Frits

解决：[Plunker]（https://jsfiddle.net/2vphgk1n/） –

你有两个问题。

1）你的图标周围有边框。与删除它：

.fa { border: none; }

2）其次，消除在HTML标签之间的空白。

来源

2016-04-22 11:39:35

标记之间的空格：'| ... –

您可以删除边框，浮动图标的左边，并漂浮在收纳容器向右：

https://jsfiddle.net/ww1nescm/1/

.fa { 
 
    border-width: 0; 
 
    float: left; 
 
} 
 

 
.home-header-sm { 
 
    float: right; 
 
    width: auto; 
 
}

来源

2016-04-22 11:44:46 Frits

字体真棒图标之间的间距

回答

相关问题