Search code examples
htmlcsssvgfont-awesomefont-awesome-5

FontAwesome 5 SVG as square element

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?

Solution

  • 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