使用 fontawesome 图标作为 <img> 的替代文本答案

【问题标题】：Using a fontawesome icon as alt-text for an <img>使用 fontawesome 图标作为 <img> 的替代文本
【发布时间】：2016-06-25 00:25:48
【问题描述】：

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

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

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

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

不幸的是，这不起作用，因为整个 FontAwesome-magic 没有点击。
有没有人尝试过同样的方法？毕竟这可能吗？

【问题讨论】：

我只是在添加 FontAwesome - 这是有效的。所以我在这个网站上使用了 FA 图标。
这甚至没有试图回答我的问题。图片的 CSS 在哪里？
光标：放大； - 仅此而已。
设置图片的font-family为fontawesome字体，并检查每个浏览器的兼容性。
stackoverflow.com/questions/4275737/… 的副本

标签： html unicode font-awesome

【解决方案1】：

我不能声称这个解决方案的功劳，它属于 @PeeHaa，他写了解决 @Stephan_Weinhold 问题的评论。

我只是想澄清一下，因为所有官方答案都使用 JavaScript，只有阅读 cmets 后，您才会发现使用简单的 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;
}

【讨论】：

【解决方案2】：

恐怕你不能。但我可以给你一个窍门。

诀窍是您可以处理图像加载错误（这就是您想要替代文本的原因，不是吗？），然后显示您想要的图标。

这不是 SEO 的好解决方案，但您想显示一个图标，所以我猜这不是您的目标。

注意如果在sn-p中看不到效果，请在bin观看-我认为这是因为缓存问题。

$('img').bind('error', function() {
  console.log('error');
  $(this).hide().after('<i class="fa fa-gear"></i>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<img src="blablalba" />

http://jsbin.com/kahuxaqezu/1/edit?html,js,output

【讨论】：

如果在sn-p中看不到效果，在bin里看吧。
谢谢！否决票确实很奇怪！我试试看。

【解决方案3】：

我现在在 iPhone 上遇到了这个问题？

如果找不到图像，我使用 ONERROR 注入 CLASS。

CSS

/* FONT AWESOME (support for all icons) */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
/* FONT AWESOME (user icon) */
.fa_user:after {
    font-family: 'Font Awesome 5 Free';
    font-size: 9em !important;              /* added !important, couldn't use 900, didn't work */
    content: "\f2bd";                       /* UNICODE (Font Awesome) <i class="far fa-user-circle"></i> */
    line-height: 1.0;                       /* I had to add this because it was INHERITING 1.5 throwing off the spacing */
}

HTML

<img src="./images/.photo.jpg" onerror="this.classList.add('icon', 'fa_user');" alt=''>

Font Awesome documentation

User Icon

【讨论】：