title: Font awesome - two circles around the icon
body: <p>I'm trying to achieve effect shown on the second picture - namely the green icon. My current state is on the first picture (working on icon with heart symbol but that doesn't really matter).</p>
  
  <p><a href="https://i.stack.imgur.com/Kimtp.png" rel="nofollow noreferrer">Current state</a><br>
  <a href="https://i.stack.imgur.com/IWfdb.png" rel="nofollow noreferrer">Goal</a></p>
  
  <p>Digging on problem I've decided to break it into parts:</p>
  
  <ol>
  <li>Render base icon (with white color)</li>
  <li>First circle around the icon (with desired color - red in this case)</li>
  <li>Rectangle below the icon</li>
  <li>Second circle around the icon (white again) - this should overpaint a part of rectange from point 3 to create the edges effect.</li>
  </ol>
  
  <p>I've been able to complete first two points with my current code:</p>
  
  <pre><code>&lt;i class=\"fas fa-heart fa-lg\"&gt;&lt;/i&gt; 
  </code></pre>
  
  <p>Where <code>fa-heart</code> is overriden like:</p>
  
  <pre><code>    .fa-heart {
      display: inline;
      border-radius: 60px;
      box-shadow: 0px 0px 2px #888;
      background: #d44d32;
      width: 18px !important;
      height: 18px !important;
      text-align: center;
      line-height: 30px;
      vertical-align: middle;
      padding: 3px;
      color: white !important;
  }
  </code></pre>
  
  <p>Code is taken from my asp mvc app due to this first line of my code may look strange - I'm computing the icon state in view.  </p>
  
  <p>One possible solution I've found doing my research is to use stacked icons. I'd very much like to render entire effect using one icon - if possible.</p>