我有一个图标Awesome这是一个信封...我希望得到相同的结果如下。
在我的代码中,我没有此蓝色边框和背景颜色白色。
我忘记了一处房产?
.subtitles{
height: 120px;
width: 100%;
padding-top: 38px;
}
.subtitle-right{
float: right;
margin-right: 70px;
display: flex;
}
.fa{
font-size: 23px;
color: blue;
margin-right: 14px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="subtitles">
<div class="subtitle-right"><i class="fa fa-envelope 5x"></i>[email protected]</div>
</div>
你无法完全做到这一点:截图中使用的图标与FontAwesome提供的图标根本不同。
但是你使用的是FontAwesome的“实心”图标 - 你可以通过使用他们的regular图标来更近一点。为此,请将类fa
更改为far
。
要更改颜色,请使用color
属性调整字体颜色。
我在下面的代码中唯一改变的是HTML中的类名。
.subtitles{
height: 120px;
width: 100%;
padding-top: 38px;
}
.subtitle-right{
float: right;
margin-right: 70px;
display: flex;
}
.far {
font-size: 23px;
color: blue;
margin-right: 14px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="subtitles">
<div class="subtitle-right"><i class="far fa-envelope"></i> [email protected]</div>
</div>
试试这个CSS:
.fa{
font-size: 23px;
color: White;
background-color: blue;
padding: 0px 1px;
margin-right: 14px;
}