使用 fontawesome 图标作为 <img> 的替代文本
Using a fontawesome icon as alt-text for an <img>
我有一些图像在 DOM 准备好后加载了一个廉价的技巧:
<img src="" data-src="/path/to/img" alt="">
我只是用JS把data-src
的内容放到src
属性里。没什么特别的。
但是由于要加载数百张图像,这需要一些时间。所以我试图使用 FontAwesome 图标的 unicode 作为替代文本来显示齿轮作为占位符:
<img src="" data-src="/path/to/img" alt="">
不幸的是,这不会起作用,因为整个 FontAwesome-magic 没有点击。
有没有人试过同样的?这到底有可能吗?
恐怕你不能。但我可以给你一个窍门。
诀窍在于您可以处理图像加载错误(这就是您想要替代文本的原因,不是吗?),然后显示您想要的图标。
这不是 SEO 的好解决方案,但你想显示一个图标,所以我想这不是你的目标。
注意 如果您在代码片段中看不到效果,请在 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" />
我现在在 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=''>
我不能声称这个解决方案属于 @PeeHaa who wrote the comment that solved @Stephan_Weinhold 的问题。
我只是想表达清楚,因为所有官方答案都使用 JavaScript,只有当您阅读评论时,您才会发现使用简单的 HTML/CSS.[=13 是可能的=]
HTML
<img src="" data-src="/path/to/img" alt="" 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;
}
我有一些图像在 DOM 准备好后加载了一个廉价的技巧:
<img src="" data-src="/path/to/img" alt="">
我只是用JS把data-src
的内容放到src
属性里。没什么特别的。
但是由于要加载数百张图像,这需要一些时间。所以我试图使用 FontAwesome 图标的 unicode 作为替代文本来显示齿轮作为占位符:
<img src="" data-src="/path/to/img" alt="">
不幸的是,这不会起作用,因为整个 FontAwesome-magic 没有点击。
有没有人试过同样的?这到底有可能吗?
恐怕你不能。但我可以给你一个窍门。
诀窍在于您可以处理图像加载错误(这就是您想要替代文本的原因,不是吗?),然后显示您想要的图标。
这不是 SEO 的好解决方案,但你想显示一个图标,所以我想这不是你的目标。
注意 如果您在代码片段中看不到效果,请在 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" />
我现在在 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=''>
我不能声称这个解决方案属于 @PeeHaa who wrote the comment that solved @Stephan_Weinhold 的问题。
我只是想表达清楚,因为所有官方答案都使用 JavaScript,只有当您阅读评论时,您才会发现使用简单的 HTML/CSS.[=13 是可能的=]
HTML
<img src="" data-src="/path/to/img" alt="" 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;
}