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

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="">
Unfortunately this won't work because the whole FontAwesome-magic isn't clicking.
Has anyone ever tried the same? Is this possible after all?

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="" 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;
}

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

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

Related

Material design on Nginx

I'm trying to apply material design UI to working web application. Application uses Nginx, PHP, PostgreSQL.
I have experience with PHP and PostgreSQL so the application works (code written in notepad++), but it is ugly as I have NO experience with web pages design, java(script) so using only basic html forms, input, button...
I would like to improve the UI so I started learn CSS. I downloaded material icons font and created several buttons, this works great and the buttons also scale to screen size.
h1 {
/* color: #999999; */
font-family: arial, sans-serif;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
text-align: center;
}
#font-face {
/* Material Icons big thanks to: https://google.github.io/material-design-icons/ */
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(/font/MaterialIcons-Regular.ttf); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(/font/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: clamp(12px,4vmin,30px);
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
.material-icons:hover {
color: e3000f;
/* background-color: #555; /* Add a dark-grey background on hover */
}
#home_button {
display: block;
position: fixed; /* Fixed/sticky position */
top: 1%;
left: 1%;
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
/*background-color: #E5E7E9;*/ /* Set a background color #E5E7E9 = 229R 231G 233B*/
background-color: rgba(229,231,233,0.5); /* Set a background color #E5E7E9 = 229R 231G 233B*/
color: black; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
text-align: center;
padding-top: 3px;
padding-left: 3px;
padding-right: 4px;
padding-bottom: 0px;
border-radius: 5px; /* Rounded corners */
}
#home_button:hover {
/*background-color: #555; /* Add a dark-grey background on hover */
filter: drop-shadow(2px 2px 2px #555);
color: #e3000f; /* Add a dark-grey background on hover */
background-color: rgba(229,231,233,1); /* Set a background color #E5E7E9 = 229R 231G 233B*/
}
<!DOCTYPE html>
<head>
<!-- This line is normally NOT included as font is locally loaded in CSS --><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- This line is normally NOT included as font is locally loaded in CSS -->
</head>
<body>
<button title="Home Button" id="home_button"><i class="material-icons" >home</i></button>
<body>
Now I would like to include forms, textboxes, checkboxes, buttons...
In guide(s) they always rely on node.js. I downloaded node.js and created test application on my local PC, but can not push this to nginx. I found multiple articles with proxyPass, but I can not use node.js on server so this is not solution.
What is the correct way to style the pages into material design and being able to keep all the PHP code and existing functionality?
To specify example what I'm trying to accomplish is to move FROM this simple HTML form (simplified here, in reality generated by PHP):
<!DOCTYPE html>
<html>
<head>
<title>Form sample</title>
</head>
<body>
<form action="/sample_form.php">
<label for="sample_input">Sample:</label><br>
<input type="text" id="sample_input" name="sample_input" value="Empty">
<input type="submit" value="Submit">
</form>
</body>
</html>
TO material design form with outlined text fields and outlined button. In below sample there is material design html syntax, but missing correct css and javascript so it is not looking as on above links. Where/how to get it and make it run on Nginx without node.js?
<!DOCTYPE html>
<html>
<head>
<title>Form sample</title>
</head>
<body>
<form action="/sample_form.php">
<label class="mdc-text-field mdc-text-field--outlined">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label" id="sample_input">Sample:</span>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<input type="text" value="Empty" class="mdc-text-field__input" aria-labelledby="sample_input">
</label>
<button class="mdc-button mdc-button--outlined">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Submit</span>
</button>
</form>
</body>
</html>
All the tutorials are heavily depending on node.js. Is it really possible to use material design only on node.js? If yes can the node.js code (locally developed) be exported and used on Nginx WITHOUT node.js?
Apologize in advance if my questions are newbie ones, but I read all the available manuals and was not able to find solution.
NodeJS and Nginx are Back-end technologies.
Material UI is designed for a NodeJS Templating engine called React.
In PHP, in case I want to populate something from a database, I would write something like <p><?php echo("Value1"); ?></p>. I may be wrong as I do not use PHP.
In the NodeJS Family, the language does not have an inbuilt <?php ?> tag. So templating engines like EJS and React need to be used which help integrating this functionality of PHP.
Now, React is such a framework which is used to integrate support for the template tag (i.e., the <?php ?> tag) in NodeJS. and Material-UI is a theme for React.
So, finally, Material-UI is a theme for React and, React is a framework for NodeJS so, Material-UI will work only with NodeJS and Not Nginx, Apache, etc. which run PHP, etc.
You can use Bootstrap 4 as the CSS framework and https://daemonite.github.io/material or https://djibe.github.io/material as the theme in case of PHP (i.e., Nginx, Apache, etc.).
Most of the tutorials of Material-UI is based on NodeJS as it is made for Node.
You will find tutorials where they demonstrate the use of Material-UI by porting its CSS as you mentioned for Nginx but, they do not work up-to the mark and Material-UI does not recommend it.
Even I had this question when I was in Grade 9. Hope this answers your question!

Font Awesome: Duotone only appearing half the time

I have a Font Awesome Pro license. Most of the icons show up, no problem, as you can see here: https://ruthannereid.com
Specifically, I use the Duotone books icon in my menu (screenshot): https://i.imgur.com/n3xoiDR.jpg
I want that same icon here (screenshot): https://i.imgur.com/8jXfyAQ.jpg
Weirdly, when I add font-family: "Font Awesome 5 Duotone" in the CSS, the icon breaks spectacularly (screenshot): https://i.imgur.com/GUK4yIq.jpg
I would love some help on this. I don't know if I need to do a PHP trick or what, but I'm willing to try any kind of code (hopefully CSS).
P. S. I've tried to add the "fa" and "fad" CSS specifications to the site::before icon manually, but it didn't fix this.
Current CSS:
.error404 .site-inner::before,
.page .site-inner::before,
.single .site-inner::before {
content: "\f5db" !important;
font-family: "Font Awesome 5 Pro" !important;
font-weight: 900 !important;
background: none !important;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
font-size: 80px;
color: var(--fa-primary-color,inherit);
opacity: 1;
opacity: var(--fa-primary-opacity,1);
}
When using the unicode approach rather than the class name approach there are a few gothchas and I am not sure which way you want to work. If you are using the Font Awesome 5 Pro font rather than the Font Awesome 5 Duotone font you need to make sure you specify the primary and the secondary unicodes. At the moment you are only seeing half the icon because you have only specified the primary layer of the icon.
If you take a look at the books page you will see there is a second unicode of 10f5db which I have highlighted in the screenshot below:
To also display the secondary layer you can add the following :after code alongside your original :before code
.error404 .site-inner::after,
.page .site-inner::after,
.single .site-inner::after{
content: "\10f5db" !important;
font-family: "Font Awesome 5 Pro" !important;
font-weight: 900 !important;
background: none !important;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
font-size: 80px;
color: var(--fa-primary-color,#fff);
opacity: 1;
opacity: var(--fa-primary-opacity,1);
}
I have not tested this solution because our Pro account does not have SO on the whitelist but am confident it should work. If it does not then please give me a shout and I will test it on one of our whitelisted domains for you.
If you are using the Font Awesome 5 Duotone font then you can specify the --fa-secondary-color as well as the --fa-primary-color.

IE11 Not recognizing the content declaration for Font Awesome

I am using Font Awesome 4.4.0 and noticed that icons only show in IE11 when I use HTML such as . However, IE11 does not recognize the "content" declaration in the Font Awesome CSS. An example of such a class is:
hr.code-light:after,
hr.code-primary:after {
content: "\f121";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}
When I apply the code-light or code-primary class to the HR tag, no Font Awesome icon appears. In IE11, Font Awesome icons only appear when I specify it in the HTML.
Anyone know a fix or workaround to this issue?

Pseudo element before content ignoring \ in browser

I have this really basic issue I am trying to solve for a while now. I am running out of all ideas.
I have a css pseudo-element before that I am styling like this.
#fPhone::before{
color: #78be20;
content: "\e622";
font-family: icons;
}
But on the browser it just prints out 622. When I inspect the pseudo tag, I see
content: "e622";
If I try adding "\" in the debugger it works but for some reason it doesn't pick it up from css.
I am running out of reasons that could be causing this.
Sure you imported the icon-font correctly and are using the proper hexcode? Below proof that it works as you may expect...
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
#fPhone::before{
color: #78be20;
content: "\e0cd"; /* different code, but same effect */
font-family: 'Material Icons';
}
/* class is pre-defined in #import (default <parent>color, 24px)*/
.material-icons { color: #78be20; font-size: 16px; }
/*
find the codes and ligatures for Material Icons at:
https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
*/
<div id="fPhone"> a phone</div>
<div><i class="material-icons">phone</i> using ligature name</div>

Custom icon twitter bootstrap

I've already found this post
How to add custom icon in Twitter Bootstrap?
But applying that solution it still computes me a 0x0px icon, I still can't understand how that may be possible but here's my sample code:
HTML
<i class="icon-linkedin"></i>
CSS
.icon-linkedin {
background-image: url("../../resources/img/icon-linkedins.png");
background-position: center center;
}
I haven't made one in bootstrap in a while, but it looks like the syntax might be a bit different now than it was when that post was made. This is how you generally would use an icon font with an element (or rather, a pseudo-element) with ANY icon font.
/* this just imports the font */
#import url(http://weloveiconfonts.com/api/?family=fontawesome);
.icon-linkedin:before {
font-family: 'FontAwesome', sans-serif;
content: "\f0e1";
}
DEMO