Safari 中的 Font-Awesome 图标堆叠问题
Font-Awesome Icon stacking issue in safari
我的超赞字体图标出现了这个奇怪的问题。我希望我的图标有圆形边框。我不想使用 border: 1px solid
因为图标边框看起来会很模糊。我已经通过 font-awesome 的“stacking method
”实现了这个平滑的边框,如here
所述
由于我的字体是 64px 大,这个 fa-circle-thin
图标边框太粗了。为了避免这种情况,我使用了 box-shadow
。
My problem is that my icon border is not uniform.
在chrome中,左侧边框有点粗。(不知何故我无法在fiddle/snippet中复制这个问题,所以可以忽略。)
但在 safari 中,右侧的边框很粗。
如何解决这个问题?我不想使用 -webkit-text-stroke
,因为它的浏览器支持有限。非常感谢任何帮助:)
这是我的代码。
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>
将 z-index:-1;
添加到 .social-block .fa-stack-1x
class。
.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/
————————
更新:
圆的粗细是 font awesome 默认应用的粗细:
如果你希望有更多的控制,你必须改变一点 css:
- 删除边框图标
<i class="fa fa-circle-thin fa-stack-2x"></i>
- 在创建边框前添加一个
新例子:
您无法更改当前 Font Awesome 图标的粗细,但是设计者还创建了一套名为 Black Tie[=30= 的商用 multi-weight 图标字体],其中包括 light 字体。
作为解决方法,我建议只使用普通图标并用 border-radius
绘制圆圈,而不是堆叠图标。保持简单,易于更新。
.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>
我的超赞字体图标出现了这个奇怪的问题。我希望我的图标有圆形边框。我不想使用 border: 1px solid
因为图标边框看起来会很模糊。我已经通过 font-awesome 的“stacking method
”实现了这个平滑的边框,如here
由于我的字体是 64px 大,这个 fa-circle-thin
图标边框太粗了。为了避免这种情况,我使用了 box-shadow
。
My problem is that my icon border is not uniform.
在chrome中,左侧边框有点粗。(不知何故我无法在fiddle/snippet中复制这个问题,所以可以忽略。)
但在 safari 中,右侧的边框很粗。
如何解决这个问题?我不想使用 -webkit-text-stroke
,因为它的浏览器支持有限。非常感谢任何帮助:)
这是我的代码。
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>
将 z-index:-1;
添加到 .social-block .fa-stack-1x
class。
.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/
————————
更新:
圆的粗细是 font awesome 默认应用的粗细:
如果你希望有更多的控制,你必须改变一点 css:
- 删除边框图标
<i class="fa fa-circle-thin fa-stack-2x"></i>
- 在创建边框前添加一个
新例子:
您无法更改当前 Font Awesome 图标的粗细,但是设计者还创建了一套名为 Black Tie[=30= 的商用 multi-weight 图标字体],其中包括 light 字体。
作为解决方法,我建议只使用普通图标并用 border-radius
绘制圆圈,而不是堆叠图标。保持简单,易于更新。
.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>