Using a fontawesome icon as alt-text for an <img>

Question

I have some images that are loaded with a cheap trick after the DOM is ready:

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

I'm just putting the content of data-src into the src-attribute with JS. Nothing fancy.
But as there are a some hundred images to load this takes some time. So I was trying to use the unicode of a FontAwesome icon as alt-text to display a cogwheel as placeholder:

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

Unfortunately this won't work because the whole FontAwesome-magic isn't clicking.
Has anyone ever tried the same? Is this possible after all?

Answer 1

I cannot claim credit for this solution, that belongs to @PeeHaa who wrote the comment that solved @Stephan_Weinhold's question.

I'm just trying to create clarity, as all of the official answers use JavaScript, and only if you read the comments will you find it's possible with simple 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;
}

Answer 2

I'm afraid you can't. But I can offer you a trick.

The trick is that you can handle the image load error (that's why you want the alternative text, isn't?), then show the icon you want.

It's not good solution for SEO but you want to show an icon so I guess that this is not your goal.

Note If you can't see the effect in the snippet, watch it in the bin - I think it's because caching issue.

$('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

Answer 3

I'm having problems with this on iPhone now?

I used the ONERROR to inject the CLASS if the image is not found.

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