FontAwesome 5 SVG as square element

Question

I am trying to use a font awesome 5 svg as a background image. However, it isn't showing up, and I don't know how to change the color. This is what I am using:

.no-profile-image {
  display: block;
  width: 100%;
  padding-bottom: 100%;
  background: url('/images/fa-solid.svg#user');
  background-size: contain;
  background-position: center center;
}

I can use it as an html svg element, but then I can't make the item square like I did as a background image above. I have tried the following but it makes element the oval shaped:

svg.no-profile-image {
    width: 100%;
    padding-bottom: 100%;
}

<svg class="no-profile-image">
    <use xlink:href="/images/fa-solid.svg#user" fill="white"></use>
</svg>

How can I either make this a background image so my div is square or make it a square html svg element?

Have you tried to use it as ``? Because even if you use it as icon, it still converts it as `SVG` and just comments out the `` tag. The library is doing that `all.js`. — Vladimir Jovanović, Dec 09 '17 at 15:07
I have tried both `i.no-profile-image` and `i.fa.fa-user` the first one gives me no image, and the second one displays as if I wrote the html inline. — Get Off My Lawn, Dec 09 '17 at 15:10
Maybe that is the difference... I might have just been using `all.css` instead of `all.js` (yesterday) when I was trying before... — Get Off My Lawn, Dec 09 '17 at 15:22
I'll write an answer explaining how to use the new font awesome 5 — Vladimir Jovanović, Dec 09 '17 at 15:23

Vladimir Jovanović · Accepted Answer · 2018-02-22T22:11:53.980

In order to get Font Awesome 5 working, you must first include the JavaScript library in the <head> like this:

<head>
    <script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
</head>

Then, in order to get the icon (the user icon in this example) you must type the following:

<i class="fas fa-user"></i>

fas stands for "font awesome solid".

There are 4 types of icons now. Solid, Regular, Light and Brands.

You can now even change the size of the icon within the <i> class by typing fa-lg for example. Read more about it here: https://fontawesome.com/how-to-use/svg-with-js

I think is `Regular`, not retro – Nicolas Del Valle Feb 22 '18 at 14:11 — Nicolas Del Valle, Feb 22 '18 at 14:11

FontAwesome 5 SVG as square element

1 Answers1