Question

我正在尝试使用字体真棒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>

我怎样才能使这个背景图像成为正方形或使其成为方形html svg元素？

Answer 1

为了让Font Awesome 5正常工作，您必须首先在t!中添加t库，如下所示：

JavaScript

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

<head>

<head> <script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script> </head>代表＆＃34;字体真棒＆＃34;。

现在有4种类型的图标。 <i class="fas fa-user"></i>，fas，Solid和Regular。

您现在甚至可以通过键入Light来更改Brands课程中图标的大小。在此处阅读更多相关信息：https://fontawesome.com/how-to-use/svg-with-js

FontAwesome 5 SVG作为方形元素

1 个答案: