Abstand zwischen font awesome Symbole

Question

Ich möchte den störenden Abstand zwischen fa-Symbolen (mit Hintergrund) in diesem jsfiddle löschen.

Ich habe Rand und Wortabstand versucht, aber es hat nicht funktioniert.

CSS des Behälters Symbole:

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

Answer 1

Sie haben zwei Probleme.

1) Ihre Symbole sind umrandet. Entfernen Sie es mit:

2) Zweitens, entfernen Sie die Leerzeichen zwischen den Tags in der HTML.

Answer 2

können Sie die Grenze entfernen, schweben die Symbole auf der linken Seite, und treiben den Aufnahmebehälter nach rechts:

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

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

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