使用position属性使用图标

Question

我是Web开发的新手。 这里有这个图标：

我正在使用Font Awesome，并且没有与之匹配的图标，因此我尝试使用以下方式制作图标：

<td>
   <div style={positionOf}>
      <i class="fa fa-envelope"></i>
      <i class="fa fa-check-circle" aria-hidden="true"></i>
   </div>
</td>

{
   top: 0.3em;
   position: absolute;
}

我在这里尝试的position : absolute第二个图标，相对于第一个图标。

因此，但这不起作用。 谁能帮我这个 ？

谢谢。

Answer 1

为了确保您的代码正常工作，您必须为图标提供一些值。 通过为图标提供一些值，它们将缩进。 使用以下属性。

top : 14px;
left : 15px;

Answer 2

您可以考虑使用Font Awesome提供的类（ https://fontawesome.com/how-to-use/on-the-web/styling/ ）

 .fa-check-circle, .fa-envelope { color: green; } .fa-circle { color: #fff; } 

 <script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script> <span> <i class="fa fa-envelope" data-fa-transform="grow-15"></i> <span class="fa-stack "> <i class="fas fa-circle fa-stack-1x" data-fa-transform="left-20 down-18"></i> <i class="far fa-check-circle fa-stack-1x" data-fa-transform="left-20 down-18"></i> </span> </span> 

Answer 3

试试看

<div>
    <span class="icon-outer">
        <i class="fa fa-envelope"></i>
        <i class="fa fa-check-circle" aria-hidden="true"></i>
    </span>
</div>

.icon-outer{
  position:relative;
}
.fa-envelope{
  font-size:30px;
  color:green;
}
.fa-check-circle{
  position:absolute;
  right:5px;
  bottom:0px;
  color:#fff;
}

https://jsfiddle.net/lalji1051/wzvaqspr/7/