title: Use inline SVG instead of font-awesome webfont in pure CSS
body: <p>I am using a <a href="https://bulma.io/" rel="nofollow noreferrer">bulma</a>-based template for a static site generator and I'm looking to remove any dependencies on Javascript and any resources hosted by third parties, as well as generally minimizing things.</p>
  
  <p>The template utilizes <a href="https://fontawesome.com/" rel="nofollow noreferrer">font awesome</a> for some of the icons involved, but it's really only around 5-10 icons total, so I was planning to inline them as SVGs rather than load an entire web font. However, I'm not sure how to get as close as possible to a drop-in replacement for these few icons through pure CSS.</p>
  
  <p>Here is a minimal working example of the HTML:</p>
  
  <pre><code>&lt;link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"&gt;
  &lt;ul style="list-style: none"&gt;
    &lt;li&gt;
      &lt;a href="https://example.com"&gt;
        &lt;span style="align-items:center; justify-content:center"&gt;&lt;i class="fa fa-globe fa-fw"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;span&gt;Example&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li style="font-size: 20px"&gt;
      &lt;a href="https://example.com"&gt;
        &lt;span style="align-items:center; justify-content:center"&gt;&lt;i class="fa fa-globe fa-fw"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;span class="link-text"&gt;Example&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li style="font-size: 40px"&gt;
      &lt;a href="https://example.com"&gt;
        &lt;span style="align-items:center; justify-content:center"&gt;&lt;i class="fa fa-globe fa-fw"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;span class="link-text"&gt;Example&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>If I use this with the fontawesome CSS (see <a href="https://jsfiddle.net/u4fgy59g/7/" rel="nofollow noreferrer">this JSfiddle</a>) by prepending this:</p>
  
  <pre><code>&lt;link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"&gt;
  </code></pre>
  
  <p>I get an icon that scales with the font size, has the same color as the font size and is centered vertically with respect to the text. If, however, I use an inline SVG (see <a href="https://jsfiddle.net/ks392fzv/6/" rel="nofollow noreferrer">this JSFiddle</a>), with this CSS:</p>
  
  <pre><code>.fa-globe::before {
    content: '';
    display: inline-block;
    height: 1em;
    width: 1em;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzY0LjIxNSAxOTJoMTMxLjQzYzUuNDM5IDIwLjQxOSA4LjM1NCA0MS44NjggOC4zNTQgNjRzLTIuOTE1IDQzLjU4MS04LjM1NCA2NGgtMTMxLjQzYzUuMTU0LTQzLjA0OSA0LjkzOS04Ni43NDYgMC0xMjh6TTE4NS4yMTQgMzUyYzEwLjY3OCA1My42OCAzMy4xNzMgMTEyLjUxNCA3MC4xMjUgMTUxLjk5Mi4yMjEuMDAxLjQ0LjAwOC42NjEuMDA4cy40NC0uMDA4LjY2MS0uMDA4YzM3LjAxMi0zOS41NDMgNTkuNDY3LTk4LjQxNCA3MC4xMjUtMTUxLjk5MkgxODUuMjE0em0xNzQuMTMtMTkyaDEyNS4zODVDNDUyLjgwMiA4NC4wMjQgMzg0LjEyOCAyNy4zMDUgMzAwLjk1IDEyLjA3NWMzMC4yMzggNDMuMTIgNDguODIxIDk2LjMzMiA1OC4zOTQgMTQ3LjkyNXptLTI3LjM1IDMySDE4MC4wMDZjLTUuMzM5IDQxLjkxNC01LjM0NSA4Ni4wMzcgMCAxMjhoMTUxLjk4OWM1LjMzOS00MS45MTUgNS4zNDUtODYuMDM3LS4wMDEtMTI4ek0xNTIuNjU2IDM1MkgyNy4yNzFjMzEuOTI2IDc1Ljk3NiAxMDAuNiAxMzIuNjk1IDE4My43NzggMTQ3LjkyNS0zMC4yNDYtNDMuMTM2LTQ4LjgyMy05Ni4zNS01OC4zOTMtMTQ3LjkyNXptMjA2LjY4OCAwYy05LjU3NSA1MS42MDUtMjguMTYzIDEwNC44MTQtNTguMzk0IDE0Ny45MjUgODMuMTc4LTE1LjIzIDE1MS44NTItNzEuOTQ5IDE4My43NzgtMTQ3LjkyNUgzNTkuMzQ0em0tMzIuNTU4LTE5MmMtMTAuNjc4LTUzLjY4LTMzLjE3NC0xMTIuNTE0LTcwLjEyNS0xNTEuOTkyLS4yMjEgMC0uNDQtLjAwOC0uNjYxLS4wMDhzLS40NC4wMDgtLjY2MS4wMDhDMjE4LjMyNyA0Ny41NTEgMTk1Ljg3MiAxMDYuNDIyIDE4NS4yMTQgMTYwaDE0MS41NzJ6TTE2LjM1NSAxOTJDMTAuOTE1IDIxMi40MTkgOCAyMzMuODY4IDggMjU2czIuOTE1IDQzLjU4MSA4LjM1NSA2NGgxMzEuNDNjLTQuOTM5LTQxLjI1NC01LjE1NC04NC45NTEgMC0xMjhIMTYuMzU1em0xMzYuMzAxLTMyYzkuNTc1LTUxLjYwMiAyOC4xNjEtMTA0LjgxIDU4LjM5NC0xNDcuOTI1QzEyNy44NzIgMjcuMzA1IDU5LjE5OCA4NC4wMjQgMjcuMjcxIDE2MGgxMjUuMzg1eiIvPjwvc3ZnPg==");
  }
  </code></pre>
  
  <p>The icon is not centered vertically with respect to the text, and it is not the same color as the text. What is the best way to treat inline SVGs as replacements for font awesome glyphs <em>without</em> javascript? (I'm less concerned with the "icons are the wrong color" than the fact that they don't seem to be aligned well with the text, I just mention it because if there is an approach that solves both problems, I'd prefer that).</p>