修改颜色很棒[关闭]

问题描述 投票:0回答:2

我有一个图标Awesome这是一个信封...我希望得到相同的结果如下。

在我的代码中,我没有此蓝色边框和背景颜色白色。

enter image description here

我忘记了一处房产?

    .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>
css
2个回答
1
投票

你无法完全做到这一点:截图中使用的图标与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>

-1
投票

试试这个CSS:

.fa{
    font-size: 23px;
    color: White;
    background-color: blue;
    padding: 0px 1px;
    margin-right: 14px;
}
© www.soinside.com 2019 - 2024. All rights reserved.