Hover-Ausgabe in der Oper, Chrom

Question

Hallo ich habe ein Problem mit Chrom und Safari (firefox scheint gut zu funktionieren) Ich habe diesen HTML:

<div> 
    <a target="_blank" class="newsletter" href="#"><i class="fa fa-newspaper-o"></i></a> 
</div> 

CSS:

.newsletter i{ 
    height:35px; 
    width:35px; 
    color:#FFFFFF; 
    font-size: 18px; 
    background-color: #00495e; 
    border-radius: 100%; 
    border:1px solid #FFFFFF; 
    padding:7px; 
    transition: all 0.5s; 
    -moz-transition: all 0.5s; /* Firefox 4 */ 
    -webkit-transition: all 0.5s; /* Safari and Chrome */ 
    -o-transition: all 0.5s; /* Opera */ 
} 
.newsletter i:hover{ 
    color:#00495e; 
    background-color: #FFFFFF; 
} 

ich bin nicht in der Lage, in allen Kreisen zu schweben, funktioniert der Platz des Symbols nicht. Ich meine, wenn ich die Maus über das Symbol im Kreis führe, wird der Hover-Effekt nicht ausgeführt und das Klick-Icon erscheint nicht.

Answer 1

Hier ist sie:

.newsletter i { 
    display:block; 
    text-align: center; 
    line-height:35px; 
    height: 35px; 
    width: 35px; 
    color: #FFFFFF; 
    font-size: 18px; 
    background-color: #00495e; 
    border-radius: 100%; 
    border: 1px solid #FFFFFF; 
    padding: 7px; 
    transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    /* Firefox 4 */ 
    -webkit-transition: all 0.5s; 
    /* Safari and Chrome */ 
    -o-transition: all 0.5s; 
    /* Opera */ 
} 

.newsletter { 
    text-decoration: none; 
} 

.newsletter:hover i { 
    color: #00495e; 
    background-color: #FFFFFF; 
} 

https://jsfiddle.net/Lnats6fj/