title: Transparent icon both svg or <i> tag with colored background
body: <p>Here's my problem:</p>
  
  <p>I have a section with some social icons. This section is within a wider div that has a background image. Now I want to give to each icon a rounded white background but I want to keep the icon transparent, so I will have a pleasant effect, but I don't want to do it with photoshop (png image) because it would be easier and actually is not my goal.</p>
  
  <p>I want to do it with HTML, Font-Awesome, and CSS.</p>
  
  <p>Here's my goal:</p>
  
  <p><a href="https://i.stack.imgur.com/zJ0EN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zJ0EN.png" alt="enter image description here"></a></p>
  
  <p>And here's my markup and css:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="splash-image"&gt;
      &lt;div class="letterhead"&gt;
        &lt;ul class="social"&gt;
          &lt;li&gt;&lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li&gt;&lt;i class="fab fa-linkedin-in"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li&gt;&lt;i class="fab fa-instagram"&gt;&lt;/i&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>.splash-image {
      font-size: 1.9rem;
      text-transform: uppercase;
      font-weight: 100;
      background-image: url(../images/myimage.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      height: 96vh;
      .letterhead {
          .social {
              li {
                  display: inline-block;
                  width: 30px;
                  height: 30px;
                  background: white;
                  i::before{
                      background:transparent;
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>First of all: Is it doable?</p>