Font-Awesome Проблема с укладкой значков в сафари

Question

У меня возникла эта странная проблема с моими шрифтами, удивительными значками. Я хотел, чтобы у моих значков была круглая граница. Я не хочу использовать border: 1px solid, потому что граница значка будет выглядеть размытой. Я достиг этой гладкой границы с помощью «stacking method» из шрифта удивительного, как описано here

Так как мой шрифт 64px большой, это fa-circle-thin иконки границы слишком толстая. Чтобы этого избежать, я использовал box-shadow.

Моя проблема заключается в том, что моя граница значков не является однородной.

В хроме, граница немного толстая на левой стороне. (Как-то я не могу воспроизвести эту проблему в скрипкой/сниппет так, который можно пренебречь.)

, но в сафари , граница с правой стороны.

Как избавиться от этой проблемы? Я не хочу использовать -webkit-text-stroke, так как он имеет ограниченную поддержку браузера. Любая помощь очень ценится :)

FIDDLE

Вот мой код.

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

Вы не можете изменить вес текущего шрифта Удивительные значки, однако разработчик также создал коммерческий набор шрифтов с несколькими весами под названием Black Tie, который включает в себя свет шрифт.

В качестве обходного пути вместо уложенных значков, я бы предложил просто использовать обычные значки и нарисовать круги с помощью border-radius. Держите его простым и легко обновляемым.

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

z-index:-1; Добавить в .social-block .fa-stack-1x класс.

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

например: https://jsfiddle.net/hwpobc93/14/

-------

Обновлено:

Круг имеет толщину, шрифт устрашающий по умолчанию в своей работе применяет:

Если вы хотите иметь больше контроля, вам нужно немного изменить css:

• Удалить значок границы <i class="fa fa-circle-thin fa-stack-2x"></i>
• Добавить перед тем, чтобы создать границу

Новый Exemple:

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