引导媒体 object - 使用 fontawesome 图标而不是 img

Question

我想在 BS4 媒体 object 中使用 fontawesome 图标而不是普通图像，但我还没有找到解决方案。

以下尝试不起作用：

<style>
                img.passphoto { 
    font-family: 'Font Awesome 5 Free';
    /* customize the following as desired */
    font-size: 9em;
    display: inline-block;
    width: 64px;
    height: 64px;
    border: 1px solid lightgray;
}
                </style>
                <div class="media">
                  <img class="mr-3 passphoto" src="..." width="1" height="1" alt="&#xf007;" ></img>
                  <div class="media-body">
                    <h5 class="mt-0">Media heading</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                  </div>
                </div>

有人有建议吗？

现在我正在设置一个 div 并将一个 FA 图标应用到它作为背景图像来完成这项工作。 但是我不知道如何将堆叠的 fonts 应用为背景图像（例如将图标放在一个圆圈中）：

<style>
                .imgX {
 width:64px;
 height:64px;
  position: relative;
}
.imgX:before {
  position: absolute;
  font-family: 'Font Awesome\ 5 Free';
  top: 0;
  content: "\f007";
  font-size:64px;
}
                </style>
                <div class="media">
                  <div class="imgX mr-3" ></div>
                  <div class="media-body">
                    <h5 class="mt-0">Media heading</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                  </div>
                </div>