字体真棒边框

Question

我正在尝试为我的超赞字体图标添加边框，如下图所示：

是的，我设法做到了，但这不是正确的方法，我会在您看到我的代码后向您解释原因：

Html:

        <div id= "contact">


        <i class="fa fa-envelope-o fa-2x"></i>
        <i class="fa fa-phone fa-2x"></i>

       </div>

和 CSS：

/*font awesome*/

i.fa-envelope-o {
  width:50px;
  height:50px;
   display: inline-block;
   border:2px solid white;
  border-radius: 60px;

}
.fa-envelope-o {

  padding-top: 5px;
}

i.fa-phone {
  width:50px;
  height:50px;
   display: inline-block;
   border:2px solid white;
  border-radius: 60px;

}

.fa-phone {

  padding-top: 5px;
}

如您所见，这不是正确的方法，如果我必须再次使用信封图标但没有边框怎么办？为了使它居中，我不得不使用 padding top。有没有更清洁的方法来做到这一点？我不想单独使用 i 标签，因为上面的文本同时使用了它，例如：

<p><i>hello</i></p>

提前致谢，凯文

Answer 1

只需创建一个新的 css class 并同时使用超棒的字体 class 和您的自定义字体。例如：

<i class="fa fa-envelope-o custom-envelope fa-2x"></i>

这将应用您想要的自定义样式，例如 border-radius、padding 等

如果您随后想使用图标的默认样式，只需省略这个额外的 class 并在以下位置保留超棒的字体 class：

<i class="fa fa-envelope-o fa-2x"></i>

演示

i.custom-envelope {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 2px solid white;
  border-radius: 60px;
}
.custom-envelope {
  padding-top: 5px;
}
#contact {
  background: black;
  color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<div id="contact">
  Custom: <i class="fa fa-envelope-o custom-envelope fa-2x"></i>
  <br>
  Default: <i class="fa fa-envelope-o fa-2x"></i>
</div>

Answer 2

试试这个：

div#contact {
  background-color: black;
}
#contact i.fa {
  border: 2px solid #fff;
  border-radius: 60px;
  color: #fff;
  display: inline-block;
  height: 30px;
  margin: 5px;
  padding: 15px;
  width: 30px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<div id= "contact">


        <i class="fa fa-envelope-o fa-2x"></i>
        <i class="fa fa-phone fa-2x"></i>

       </div>

字体真棒边框

Font awesome borders

html

css

font-awesome

演示