字体很棒的边框

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;
}

正如你所看到的那样，这不是正确的方法，如果我必须再次使用信封图标但没有边框怎么办？为了使它居中，我不得不使用填充顶部。有更清洁的方法吗？我不想单独使用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>

Answer 2

只需创建一个新的css类，并使用font-awesome类和自定义类。例如：

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

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

如果您想使用图标的默认样式，只需省略这个额外的类并将字体真棒类保留在：

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

演示

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;