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