字体真棒边框
Font awesome borders
我正在尝试为我的超赞字体图标添加边框,如下图所示:
是的,我设法做到了,但这不是正确的方法,我会在您看到我的代码后向您解释原因:
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>
提前致谢,
凯文
只需创建一个新的 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>
试试这个:
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>
我正在尝试为我的超赞字体图标添加边框,如下图所示:
是的,我设法做到了,但这不是正确的方法,我会在您看到我的代码后向您解释原因:
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>
提前致谢, 凯文
只需创建一个新的 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>
试试这个:
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>