title: Adding an icon to a html i tag
body: <p>In jQuery, how can I add an icon to an <code>i</code> tag?</p>
  
  <p>Here is the html code:</p>
  
  <pre><code>&lt;div class="example_infobox1"&gt;
      &lt;div class="col-md-3 col-sm-6 col-xs-12"&gt;
          &lt;div class="info-box"&gt;
              &lt;span class="info-box-icon"&gt;&lt;i class=""&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;div class="info-box-content"&gt;
                  &lt;span class="info-box-text"&gt;Messages&lt;/span&gt;
                  &lt;span class="info-box-number"&gt;1,410&lt;/span&gt;
              &lt;/div&gt;
              &lt;!-- /.info-box-content --&gt;
          &lt;/div&gt;
          &lt;!-- /.info-box --&gt;
      &lt;/div&gt;
      &lt;!-- /.col --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the code that I have tried:</p>
  
  <pre><code>$('.example_infobox4 .i').addClass('fa fa-envelope-o');
  </code></pre>
  
  <p>Can I please have some help with this?</p>
  
  <p>Thanks</p>