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?
Related
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
I am trying to integrate font-awesome into a web project but an identified little piece of code in my css makes the font-awesome icons appear as white squares. When I remove the little peace of CSS code it works but I cannot remove it due to the current web site layout. Is there a way to make the icons appear right anyway?
This is the code that blocks the icons that is needed for the layout:
*,*:before,*:after{
box-sizing: border-box;
position: relative;
font-family : Arial;
font-size : 12px;
font-weight : normal;
}
It doesn't matter if font-awesome css is included before or after my custom css code. The issue remains...
Your font-family is being overwritten to Arial. Remove the font related parts from this selector and add it to a body selector.
*,*:before,*:after{
box-sizing: border-box;
position: relative;
}
body {
font-family : Arial;
font-size : 12px;
font-weight : normal;
}
The problem is in *:before so you have to change that in you css. Take a look at this https://jsfiddle.net/ss95sfLz/
CSS
*,*:after{
box-sizing: border-box;
position: relative;
font-family : Arial;
font-size : 12px;
font-weight : normal;
}
This is problem because font-awesome icon use :before and this is the code
.fa-balance-scale::before {
content: "";
}
You are overriding all (*) of the fonts in the :before and :after pseudo selectors; which are used by font-awesome and many other libs. You should try to target only what needs to be changed by that code-snippet with a .class or #id.
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>
I have a odd issue on my "in-development" website here: http://www.cphrecmedia.dk/musikdk/stage/
The H1-h6 fonts are just "sans-serif", but often in Chrome it shows another font (screenshot: http://cl.ly/image/260B0H0l1w0C). When the mouse hover the navigation it changes to the right font. FYI this is how it should look like: http://cl.ly/image/442l071M3N1B
The code used for font is:
.nm li a {
float: left;
font-family: sans-serif;
height:22px;
padding: 12px 14px 7px 14px;
color:#white;
font-size: 12px;
line-height: 20px;
}
I mainly develop using Chrome, so I'm not sure if the issue is present in other browsers. Have anyone of you seen this issue before?
'sans-serif' is not a font name it's a font family specification.
Use a sans-serif font name like "Arial" or "Verdana" or else you will have unexpected results (the browser may replace your font with generic ones).
Try using custom font method by downloading the font and keeping it in your fonts folder.
Example:
#font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{ font-family:myFirstFont; }
Try using custom web font from google:
http://www.google.com/fonts
Select a font and uses one of the three metods, i prefer CSS method.
Example:
#import url(http://fonts.googleapis.com/css?family=Roboto);
Import this in CSS and use this for you text: font-family: 'Roboto', sans-serif;
I'm looking to recreate the "Sign in to iCloud" text on http://beta.icloud.com
I have already copied all the styles attributed to that line of text, and everything is in order apart from the thickness of the text. I see Apple has applied the font-weight 300 to the style, which should and does make it thinner, however when I copy and paste the exact same code my browser renders it thicker on my own webpage. My question is, how is Apple making the text thin like that or how can I achieve the same effect?
The code from them that I have used so far is:
position: absolute;
color: #FFF;
left: 0px;
right: 0px;
height: 40px;
top: 131px;
font-size: 35px;
font-family: "Helvetica Neue",sans-serif;
font-weight: 300;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
Any ideas on what could be causing it to render at normal thickness? I have no conflicting styles and this is the only code relating to my line of text
Using the CSS given I can get the same style as on iCloud website. (http://jsfiddle.net/LeBen/WznR5/)
After font-weight, the property that can slightly change the appearance of text on webkit browsers is -webkit-font-smoothing: antialiased;. If you don't use it, the browser fallback to the default smoothing mode (subpixel-antialiased) and result in a text looking bolder.
Are you sure you've included it in your tests and your browser apply it?
Try Avenir Ultra Light it's a thin font that looks similar to it
http://www.typophile.com/node/42590