边框半径打破字体很棒？

Question

我正在尝试在超棒的字体图标上添加 border 然后 border-radius 但它在顶部和底部显示黑洞。这是issue

的图片

我是我的 CSS 代码

i.fa{
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    border-radius: 15px;
    border: 1px solid #fff;
    font-size: 20px;
}

Answer 1

Bilal，正如 Suresh 所说，您不能在 font-awesome 上使用 border-radius，因为 font-awesome 是 SVG 图像的集合。不过，您可以尝试用白色背景填充圆圈，使文本变小并使字体变黑。

body
{
    background: #000;
}

.button
{
    background: #FFF;
    color: #000;
    padding: 5px;
    font-size: 20px;
    border-radius: 15px;
}

结果：http://jsfiddle.net/7rjkwqft/

Answer 2

您必须将此元素放入代码中

overflow: hidden;

试试这个可能有用

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

http://fontawesome.io/examples/

Answer 3

您可以将其他图标堆叠在 fa-circle 图标上，使它们看起来呈圆形。也可以使用 class fa-inverse.

反转颜色

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

-http://fortawesome.github.io/Font-Awesome/examples/

这里（较小的）社交图标堆叠在（较大的）fa-circle 图标之上。另请注意，这些不是方形版本，即。不要使用 facebook-square、twitter-square 等

body {
  background-color: black;
}
input {
  background-color: #E88080;
  border: 0px;
  border-radius: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <input type="text" />
  <span class="fa-stack">
    <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
    <i class="fa fa-search fa-stack-1x"></i>
  </span>
</div>
<div class="social">
  <span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
  <i class="fa fa-linkedin fa-stack-1x"></i>
</span>
  <span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
  <i class="fa fa-facebook fa-stack-1x"></i>
</span>
  <span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
  <span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
  <i class="fa fa-instagram fa-stack-1x"></i>
</span>
</div>
<h6 style="color:white; font-family:monospace">Note that if you have ad blocking active on this page, you won't be able to see the icons.</h6>

边框半径打破字体很棒？

Border-radius breaking on font awesome?

html

css

font-awesome