使用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/