FontAwesome 5 SVG 作为方形元素

Question

我正在尝试使用字体 awesome 5 svg 作为背景图片。但是，它没有出现，而且我不知道如何更改颜色。这是我正在使用的：

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

我可以将它用作 html svg 元素，但我无法像上面的背景图片那样将项目设为正方形。我尝试了以下但它使元素成为椭圆形：

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>

我怎样才能将其设为背景图片以便我的 div 为正方形或将其设为正方形 html svg 元素？

Answer 1

为了让 Font Awesome 5 正常工作，您必须首先像这样在 <head> 中包含 JavaScript 库：

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

然后，为了获取图标（本例中的用户图标），您必须键入以下内容：

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

fas代表"font awesome solid".

现在有4种图标。 Solid、Regular、Light 和 Brands。

您现在甚至可以通过键入 fa-lg 来更改 <i> class 中图标的大小。在这里阅读更多相关信息：https://fontawesome.com/how-to-use/svg-with-js

FontAwesome 5 SVG 作为方形元素

FontAwesome 5 SVG as square element

html

css

svg

font-awesome

font-awesome-5