html - Font Awesome 边框

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

试试这个:

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>