title: Adding transparent icon with html background
body: <p>I'm having trouble to place a transparent white envelope icon with a green background. I don't get what's happening because it worked fine with the telephone icon. </p>
  
  <p>Side Question.: Any suggestion on what I should use as an html for something that is on top of the header? I had created the logo and the nav bar in the header and figured it was easier to create another session on top of it for the phone and e-mail but it's turning into a styling nightmare.</p>
  
  <p><a href="https://i.stack.imgur.com/wpRAt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wpRAt.jpg" alt="snap"></a></p>
  
  <p>I've tried about 10 different pictures and none worked. </p>
  
  <p>´´´</p>
  
  <pre><code>    &lt;aside class="phone"&gt;
          &lt;a href="mailto:cplusc@gmail.com"&gt;&lt;img src="../C&amp;C/img/kisspng-paper-black-and-white-envelope-5a7b1ac9f163b2.4908982415180172259887.jpg" width="18" height="18"&gt; contador@gmail.com&lt;/a&gt;&lt;a href="tel:+1-303-499-7111"&gt;&lt;img src="../C&amp;C/img/Call-Icon.png" width="18" height="18"&gt; (303) 499-7111&lt;/a&gt;
      &lt;/aside&gt;
  
  
      &lt;header&gt;
          &lt;div class="containerHeader"&gt;
            &lt;div id="Branding"&gt;
              &lt;img src="./img/logo.png.png"&gt;
            &lt;/div&gt;
            &lt;nav&gt;
                &lt;ul&gt;
                    &lt;li class="current"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;!––Current makes the current page have a different colour--&gt;
                    &lt;li&gt;&lt;a href="quemsomos.html"&gt;Quem somos?&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="services.html"&gt;Serviços&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/nav&gt;                        
          &lt;/div&gt; 
  
      &lt;/header&gt;  
  </code></pre>
  
  <p>´´´</p>