使用position属性使用图标

Question

I am totally new to the web development. Here I have this icon:

I am using Font Awesome, and there is no icon that matches that, so I am trying to make a icon using the following way:

<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;
}

Here I am trying position : absolute to the second icon and relative to the first one.

So, but this is not working. Can any one help me with this ?

Thanks.

Answer 1

To make sure your code is working you have to give some values to the icons. By giving some values to the icon they will be indented. Use the following Properties.

top : 14px;
left : 15px;

Answer 2

You can do this consider the classes that Font Awesome provides ( 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

Try with

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