FontAwesome 5 SVG 作为方形元素答案

【问题标题】：FontAwesome 5 SVG as square elementFontAwesome 5 SVG 作为方形元素
【发布时间】：2017-12-09 15:04:42
【问题描述】：

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

【问题讨论】：

您是否尝试将其用作？因为即使您将其用作图标，它仍会将其转换为 SVG 并且只是删除  标记。图书馆正在这样做all.js。
我已经尝试了i.no-profile-image 和i.fa.fa-user 第一个没有图像，第二个显示好像我编写了内联html。
 试试这样。 “fas”的意思是“字体真棒”。
奇怪......它开始工作......现在是方形......
你把all.js放在<head>里了吗？

标签： html css svg font-awesome font-awesome-5

【解决方案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 代表“字体真棒实心”。

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

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

【讨论】：

我认为是Regular，而不是复古