Use of Font Awesome icons in different shapes

Font Awsome Icon in Circle

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
      .circle {
        height:200px;
        width:200px;
        background-color:#92ad2a;
        border-radius:100px;
        position:absolute;
      }
      .icon .fa-home {
        font-size: 60px;
        color: #becc7d;
        margin-top: 66px;
        margin-left:71px;
      }
      .arc {
        border-radius: 100px;
        background-color: #ffffff;
        height: 139px;
        width: 130px;
        margin-left: 34px;
        margin-top:14px;
      }
    </style>
  </head>
  <body>
    <div class="circle">
      <div class="icon">
        <i class="fa fa-home" aria-hidden="true">
        </i>
      </div>
      <div class="arc">
      </div>
    </div>
  </body>
</html>

Output

Font Awsome Icon in Square

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
      .bg-green{
        background-color: #76c38f;
      }
      #white{
        color:#ffffff;
      }
      .box{
        padding: 15px;
        width: 146px;
      }
      .box-content h3{
        text-align-last: center;
      }
      .box-content p{
        font-size: 10px;
        text-align: center;
        color:#9c9c9c;
      }
      .logo .fa-car{
        width:95px;
        display:block;
        margin: 0 auto;
      }
      .icon .fa-car {
        font-size: 50px;
        margin-left:44px;
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="col-md-3">
        <div class="box bg-green ">
          <div class="icon">
            <i class="fa fa-car" aria-hidden="true">
            </i>
          </div>
          <div class="box-content textwhite">
            <h3>SERVICE
              <BR> TITLE
                </h3>
              <p id="white">Vrying to keep my markup
                <br>
                as clean as possible,
              </br>
            HR tag that still pulls  
            </p>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

Output

Keywords: