0

我正在尝试使用令人敬畏的 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 元素？

4

1 回答 1

0

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

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

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

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

fas代表“字体真棒固体”。

现在有 4 种类型的图标。Solid, Regular,Light和Brands.

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

于 2017-12-09T15:26:00.903 回答