html - 使用 fontawesome 图标作为 <img> 的替代文本

Question

我有一些图像在 DOM 准备好后用一个廉价的技巧加载:

<img src="" data-src="/path/to/img" alt="">

我只是用JS将data-src的内容放入src属性中。没什么花哨的。
但由于要加载数百张图像，这需要一些时间。所以我尝试使用 FontAwesome 图标的 unicode 作为替代文本来显示齿轮作为占位符:

<img src="" data-src="/path/to/img" alt="&#xf013;">

不幸的是，这不起作用，因为整个 FontAwesome-magic 都没有点击。
有人尝试过同样的事情吗？这到底有可能吗？

Answer 1

我不能声称此解决方案属于 @PeeHaa谁写了解决问题的评论@Stephan_Weinhold的问题。

我只是想澄清一下，因为所有官方答案都使用 JavaScript，只有阅读评论，您才会发现使用简单的 HTML/CSS 就可以实现。

HTML

<img src="" data-src="/path/to/img" alt="&#xf007;" class="passphoto">

CSS

img.passphoto { 
    font-family: 'Font Awesome 5 Free';
    /* customize the following as desired */
    font-size: 9em;
    display: inline-block;
    width: 200px;
    height: 234px;
    border: 1px solid lightgray;
}