CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 10863

Use inline SVG instead of font-awesome webfont in pure CSS

I am using a bulma-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.

The template utilizes font awesome 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.

Here is a minimal working example of the HTML:

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<ul style="list-style: none">
  <li>
    <a href="https://example.com">
      <span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
      <span>Example</span>
    </a>
  </li>
  <li style="font-size: 20px">
    <a href="https://example.com">
      <span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
      <span class="link-text">Example</span>
    </a>
  </li>
  <li style="font-size: 40px">
    <a href="https://example.com">
      <span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
      <span class="link-text">Example</span>
    </a>
  </li>
</ul>

If I use this with the fontawesome CSS (see this JSfiddle) by prepending this:

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

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 this JSFiddle), with this CSS:

.fa-globe::before {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzY0LjIxNSAxOTJoMTMxLjQzYzUuNDM5IDIwLjQxOSA4LjM1NCA0MS44NjggOC4zNTQgNjRzLTIuOTE1IDQzLjU4MS04LjM1NCA2NGgtMTMxLjQzYzUuMTU0LTQzLjA0OSA0LjkzOS04Ni43NDYgMC0xMjh6TTE4NS4yMTQgMzUyYzEwLjY3OCA1My42OCAzMy4xNzMgMTEyLjUxNCA3MC4xMjUgMTUxLjk5Mi4yMjEuMDAxLjQ0LjAwOC42NjEuMDA4cy40NC0uMDA4LjY2MS0uMDA4YzM3LjAxMi0zOS41NDMgNTkuNDY3LTk4LjQxNCA3MC4xMjUtMTUxLjk5MkgxODUuMjE0em0xNzQuMTMtMTkyaDEyNS4zODVDNDUyLjgwMiA4NC4wMjQgMzg0LjEyOCAyNy4zMDUgMzAwLjk1IDEyLjA3NWMzMC4yMzggNDMuMTIgNDguODIxIDk2LjMzMiA1OC4zOTQgMTQ3LjkyNXptLTI3LjM1IDMySDE4MC4wMDZjLTUuMzM5IDQxLjkxNC01LjM0NSA4Ni4wMzcgMCAxMjhoMTUxLjk4OWM1LjMzOS00MS45MTUgNS4zNDUtODYuMDM3LS4wMDEtMTI4ek0xNTIuNjU2IDM1MkgyNy4yNzFjMzEuOTI2IDc1Ljk3NiAxMDAuNiAxMzIuNjk1IDE4My43NzggMTQ3LjkyNS0zMC4yNDYtNDMuMTM2LTQ4LjgyMy05Ni4zNS01OC4zOTMtMTQ3LjkyNXptMjA2LjY4OCAwYy05LjU3NSA1MS42MDUtMjguMTYzIDEwNC44MTQtNTguMzk0IDE0Ny45MjUgODMuMTc4LTE1LjIzIDE1MS44NTItNzEuOTQ5IDE4My43NzgtMTQ3LjkyNUgzNTkuMzQ0em0tMzIuNTU4LTE5MmMtMTAuNjc4LTUzLjY4LTMzLjE3NC0xMTIuNTE0LTcwLjEyNS0xNTEuOTkyLS4yMjEgMC0uNDQtLjAwOC0uNjYxLS4wMDhzLS40NC4wMDgtLjY2MS4wMDhDMjE4LjMyNyA0Ny41NTEgMTk1Ljg3MiAxMDYuNDIyIDE4NS4yMTQgMTYwaDE0MS41NzJ6TTE2LjM1NSAxOTJDMTAuOTE1IDIxMi40MTkgOCAyMzMuODY4IDggMjU2czIuOTE1IDQzLjU4MSA4LjM1NSA2NGgxMzEuNDNjLTQuOTM5LTQxLjI1NC01LjE1NC04NC45NTEgMC0xMjhIMTYuMzU1em0xMzYuMzAxLTMyYzkuNTc1LTUxLjYwMiAyOC4xNjEtMTA0LjgxIDU4LjM5NC0xNDcuOTI1QzEyNy44NzIgMjcuMzA1IDU5LjE5OCA4NC4wMjQgMjcuMjcxIDE2MGgxMjUuMzg1eiIvPjwvc3ZnPg==");
}

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 without 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).

Upvotes: 3

Views: 8837

Answers (2)

user3763874
user3763874

Reputation: 11

In your fiddle https://jsfiddle.net/ks392fzv/6/, if you set content to content to content: "\00a0\00a0" in the .fa-globe::before class, it will give the i content and that element can now align by the baseline.

.fa-globe::before {
  content: '\00a0\00a0';
  ...

I forked your fiddle and made the small change here: https://jsfiddle.net/ndebellas/y4dLcqkx/.

Upvotes: 1

Tim Day
Tim Day

Reputation: 105

Perhaps this resource could be useful for you. IcoMoon has a decent selection of free icons, including the social networks, and if you click 'generate svg' you can then select 'get code' and copy/paste the html and css straight into your site.

To change icon color and layout you can simply change the css you just grabbed. Something like:

`
.icon {
display: flex;
align-items: center;
color: #whatever-text-color;
}
`

Here is a JS-free example that you can play with. If you are using a sass variable for controlling font-size, you could also hook the image up to that to keep everything scaling together.

The only catch with using SVG over using font-awesome is a lack of svg support on old/ancient IE browsers. Everything else is a solid win - less http requests, less file size, less dependencies.

Hope this helps :)

EDIT extra tip. For animations with inline svg, put a class or id onto the PATH tag and animate that. For rotations you might also need: transform-origin: center; since it defaults to rotating around the top-right. If you have an svg with multiple paths, you can animate them individually and start getting really funky.

Upvotes: 1

Related Questions