Font-Awesome Icon stacking issue in safari

Question

Sto avendo questo strano problema con le mie icone fantastiche font. Volevo che le mie icone avessero un bordo rotondo. Non voglio usare border: 1px solid perché il bordo dell'icona apparirà sfocato. Ho raggiunto questo confine levigate dal "stacking method" di font-impressionante come descritto here

Dal momento che il mio carattere è 64px grande, questo fa-circle-thin icone confine è troppo spessa. Per evitare che ho usato box-shadow.

Il mio problema è che il mio bordo dell'icona non è uniforme.

in Chrome, di confine è un po 'di spessore sul lato sinistro. (In qualche modo non riesco a riprodurre questo problema in violino/frammento in modo che può essere trascurata.)

ma in Safari , il bordo è spesso sul lato destro.

Come sbarazzarsi di questo problema? Non voglio usare -webkit-text-stroke in quanto ha un supporto browser limitato. Ogni aiuto è molto apprezzato :)

FIDDLE

Ecco il mio codice.

a{ 
 
    text-decoration: none; 
 
} 
 
.social-block .fa { 
 
    font-size: 64px; 
 
} 
 

 
span.fa-stack { 
 
    width: 64px; 
 
    height: 64px; 
 
} 
 

 
.social-block .fa-stack-1x:before { 
 
    font-size: 24px; 
 
    vertical-align: top; 
 
    line-height: 64px; 
 
} 
 
.social-block .fa-stack-1x{ 
 
    box-shadow: inset 0 0 0px 7px #fff; 
 
    position: absolute; 
 
    top: -1px; 
 
} 
 
.social-block a:hover .fa-stack-1x{ 
 
    box-shadow: none; 
 
} 
 
.social-block a:hover .fa-stack-1x:before { 
 
    width: 50px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    left: 7px; 
 
    top: 7px; 
 
    position: absolute; 
 
} 
 

 
.social-block .fa { 
 
    color: #CC1E4A; 
 
    border-radius: 50%; 
 
    -webkit-transition: all ease .25s; 
 
    -moz-transition: all ease .25s; 
 
    -o-transition: all ease .25s; 
 
    transition: all ease .25s; 
 
    font-size: 64px; 
 
} 
 

 
.social-block a:hover .fa-circle-thin { 
 
    background: none; 
 
} 
 
.social-block a:hover .fa-stack-1x:before { 
 
    background: #CC1E4A; 
 
    display: block; 
 
    border-radius: 50%; 
 
} 
 
.social-block a:hover .fa-stack-1x { 
 
    color: #fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="social-block"> 
 
    <a href="#"> 
 
     <span class="fa-stack fa-lg"> 
 
     <i class="fa fa-circle-thin fa-stack-2x"></i> 
 
     <i class="fa fa-facebook fa-stack-1x"></i> 
 
    </span> 
 
    </a> 
 
    <a href="#"> 
 
     <span class="fa-stack fa-lg"> 
 
     <i class="fa fa-circle-thin fa-stack-2x"></i> 
 
     <i class="fa fa-twitter fa-stack-1x"></i> 
 
    </span> 
 
    </a> 
 
    <a href="#"> 
 
     <span class="fa-stack fa-lg"> 
 
     <i class="fa fa-circle-thin fa-stack-2x"></i> 
 
     <i class="fa fa-linkedin fa-stack-1x"></i> 
 
    </span> 
 
    </a> 
 
</div>

Answer 1

Non è possibile modificare il peso del font corrente Icone fantastiche, tuttavia il designer ha anche creato un set commerciale di caratteri icona multi-peso chiamato Black Tie, che include il font light.

Come soluzione alternativa, anziché le icone in pila, suggerisco di utilizzare solo le normali icone e disegnare le cerchie con border-radius. Mantenerlo semplice e facile da aggiornare.

Jsfiddle Example

.social-block a { 
 
    position: relative; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    margin: 10px; 
 
    color: #cc1e4a; 
 
    background-color: #fff; 
 
    border: 1px solid #cc1e4a; 
 
    border-radius: 50%; 
 
    box-sizing: border-box; 
 
    width: 50px; 
 
    height: 50px; 
 
    text-align: center; 
 
    transition: all .25s ease; 
 
    transition-property: color, box-shadow; 
 
} 
 
.social-block a:hover { 
 
    box-shadow: 0 0 0 3px #cc1e4a; 
 
    background-color: #cc1e4a; 
 
    color: #fff; 
 
} 
 
.social-block .fa { 
 
    font-size: 24px; 
 
    height: 100%; 
 
} 
 
/* center icon vertically */ 
 
.social-block .fa:after { 
 
    content: ""; 
 
    height: 100%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
/* box-shadow white line fixes */ 
 
.social-block a:hover:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: -3px; right: -3px; 
 
    top: -3px; bottom: -3px; 
 
    border-radius: 50%; 
 
    border: 6px solid #cc1e4a; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="social-block"> 
 
    <a href="#"><i class="fa fa-facebook"></i></a> 
 
    <a href="#"><i class="fa fa-twitter"></i></a> 
 
    <a href="#"><i class="fa fa-linkedin"></i></a> 
 
</div>

Answer 2

Aggiungi z-index:-1;-.social-block .fa-stack-1x classe.

.social-block .fa-stack-1x { 
    box-shadow: inset 0 0 0px 7px #fff; 
    z-index:-1; // Add this 
    position: absolute; 
    top: -1px; 
} 

esempio: https://jsfiddle.net/hwpobc93/14/

-------

Aggiornato:

Il cerchio ha lo spessore quale font applys impressionanti per impostazione predefinita:

Se desideri avere più controllo devi cambiare un po 'il css:

• rimuovere l'icona confine <i class="fa fa-circle-thin fa-stack-2x"></i>
• Aggiungi un prima per creare il bordo

Nuovo Esempio:

https://jsfiddle.net/hwpobc93/18/