title: how to use fa icons in bootstrap card?
body: <p>I have implemented a bootstrap card, and in the body area of the card I have a list, what I need to do is to place fontawesome icons, instead of the default bullets, before my <code>p</code> tags, but it doesn't seem to work.</p>
  
  <p>Here is my code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card mb-3" style="border-left: 6px solid #ffc200; "&gt;
      &lt;div class="card-header"&gt;&lt;b&gt;Smart Band with Gesture Control&lt;/b&gt;&lt;/div&gt;
          &lt;div class="card-body"&gt;
             &lt;h6 class="card-subtitle mb-2 text-muted"&gt;Arduino Uno + Android app&lt;/h6&gt;
             &lt;ul class="fa-ul"&gt;
                 &lt;li&gt;&lt;span class="fa-li"&gt;&lt;i class="fa fa-circle"&gt;&lt;/i&gt;&lt;/span&gt;&lt;p class="card-text"&gt;Wearable smart band&lt;/p&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;span class="fa-li"&gt;&lt;i class="fas fa-check-square"&gt;&lt;/i&gt;&lt;/span&gt;&lt;p class="card-text"&gt;control smartphone with simple hand gesture&lt;/p&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;span class="fa-li"&gt;&lt;i class="fas fa-check-square"&gt;&lt;/i&gt;&lt;/span&gt;&lt;p class="card-text"&gt;Heartbeat &amp; temparature measurement&lt;/p&gt;&lt;/li&gt;
             &lt;/ul&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>