边界半径打破字体真棒？

Question

我试图添加border然后border-radius在字体 - 真棒图标,但它在顶部和底部显示黑洞.这是问题的形象

我这是我的CSS代码

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

Answer 1

你必须把这个元素放在代码中

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>