html - 边框半径打破字体很棒？

Question

我正在尝试添加 border 然后 border-radius 在 font-awesome 图标上，但它在顶部和底部显示黑洞。这是问题的图片

这是我的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>

http://fontawesome.io/examples/