I don't use Font Awesome but I do use icon fonts in the way described by Chris Coyier on CSS Tricks.
I wish to tweak his code to enable them to work in IE7. I realise generated content is not supported in IE7 so I had a look at how Font Awesome deals with the issue and it looks like they use this JS expression:
.ie7icon(#inner) {
*zoom: ~"expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '#{inner}')";
}
My problem is that I just can;t get my head around what it is actually doing. I need to know this so I can tweak it and make it work for the way I am using icons.
ADDED:
I have this in my Sass file at the moment:
[data-icon]:before {
#extend %icon-font
content: attr(data-icon)
speak: none
-webkit-font-smoothing: antialiased
How could I use the JS expression to add IE7 support on? Maybe a mixin would help here somehow?
Can you explain the actual JS expression?
The Sass equivalent of that mixin would be like this:
#mixin ie7icon($inner) {
*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '#{$inner}');
}
.foo {
#include ie7icon(\f000);
}
Output:
.foo {
*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '\f000');
}
Zoom is a proprietary IE CSS property and tends to be the property of choice for triggering HasLayout (see: http://haslayout.net/haslayout) because it doesn't have any side effects for non-IE browsers.
The asterisk before the zoom property is your standard star hack. It exploits a bug in the CSS parser for IE<8 as a way to provide styles exclusively to those browsers (see: http://en.wikipedia.org/wiki/CSS_filter#Star_hack)
Expressions are primarily an IE only thing. They allow you to run arbitrary JavaScript via CSS (see: http://msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspx). This particular expression is setting the contents of whatever tag it is being applied to with the value of $inner, so it is really only intended to be used with an empty tag like so:
<p><i class="foo"></i> I have an icon!</p>
First of all, you need to covert your img to font formats, fontsquirrel.com
and the css would like
#font-face { font-family: 'imgtoicon';
src:url('icons.eot');
src: url('icons.eot?#iefix') format('embedded-opentype'),
url('icons.ttf') format('truetype'),
url('icons.svg#icons') format('svg');
font-weight: normal;
font-style: normal;
}
create a class name for the font
.iconic {
display:inline-block;
font-family: 'imgtoicon';
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
icon references example
.cat:before{content:'\e011';}
.dog:before{content:'\e022';}
in your css for IE7
.iconic {
font-family: 'imgtoicon';
font-weight: normal;
}
.cat{ *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = '\e011'); }
You could provide an alternative stylesheet using a conditional like so (credits to Paul Irish) <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />< ![endif]-->
Then in your ie7.css :
[class^="icon-"],
[class*=" icon-"] {
font-family: your-icon-font;
}
.icon-custom { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = 'utf8-Custom'); }
I think *zoom helps giving a layout to the element and debug a IE+windows weird behavior, while this.innerHTML enables you to provide the utf8 value that corresponds to your icon.
You could also go like this (still Paul Irish and h5bp) and alternatively give a specific class to your html selector by pasting this line below your DOCTYPE :
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
Then you can go
.lt-ie8 [class^="icon-"],
.lt-ie8 [class*=" icon-"] {
font-family: your-icon-font;
}
.lt-ie8 .icon-custom { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = 'utf8-Custom'); }
h5bp plans to drop support for IE6 IE7 and considers [complete removal for these conditionals][3] but I find them useful for this especially.
Hope this helps
Please let me know how it goes
Charles
If your icon is not intented to change at runtime, you could use the following :
.icon-glass {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
If your icon is intended to change at runtime, you could do something like this :
.icon-glass {
*top:expression(0, this.innerHTML = '');
}
Unfortunately, this is extremely slow. While it is likely to work in IE6 with a significant reduction of your performance, IE7 is likely to crash if you have too many icons on your page. So I wouldn't recommend this second technique unless you use only very few icons and you can afford the performance reduction.
Related
Pretty basic question here, I want to use a font that is saved in my browser and don't have link for it
How to check the css rule for the font.
How to use it in my website.
You would most likely have to use #font-face and download your font as a .ttf or .woff2 file.
Kind of like this: src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")
To apply the #font-face to an element, give the element a font-family property and set it to whatever you named it in the #font-face rule.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff); /* change this to your font */
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
</body>
</html>
Source: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Additional Reference: developer.mozilla.org/en-US/docs/Web/CSS/#font-face
Hope this helped.
I have a joomla site and i tried to use the font "Montserrat" from google on some classes.
The font looks good on chrome and I.E., but looks bold or bolder on firefox.
The css that i tried
p
{
font-weight: normal;
}
p
{
font-weight: 400;
}
I found a thousand topics on internet, no solution.
Try this maybe help:
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
body {
font-weight: 500;
}
/* and browser specific rule at the bottom */
#-moz-document url-prefix() {
body {
font-weight: lighter !important;
}
}
I've been struggling with this:
CSS pre-processor is removing quotation marks
...then I've found out that:
CSS processor (cssnano) in our React app is removing quotation marks
So my font is loading locally from my computer, not from Google's servers.
This causes a different font file in Firefox than in Chrome.
Check this out: https://github.com/cssnano/cssnano/issues/177
Here is a simple code sample from a language switch in HTML. The CSS should separate the span elements and display a dot in between:
<html>
<head>
<style type="text/css">
.languageSwitch span:before {
content: "•";
padding: 0 4px;
font-weight: normal;
}
.languageSwitch span:first-child:before {
content: "";
padding: 0;
}
.languageSwitch .current {
font-weight: bold;
}
</style>
</head>
<body>
<div class="languageSwitch">
<span>Deutsch</span>
<span class="current">English</span>
<span>français</span>
</div>
</body>
</html>
This works fine in Firefox, but Internet Explorer 9¹ simply ignores the :before directive. In the “developers tools” CSS dialog the “content” property does not show up either. I have searched all over the web: There are pseudo-element issues IE 8, but IE 9 should know them, and this is “old” CSS 2.
Does someone have a clue why this fails (bug in IE 9?) or how the syntax must look like?
1) To be clear: Version 9.0.8112.16421 / “Updateversion” 9.0.6 (KB2675157)
Check the doctype. On jsfiddle, this works fine in IE9: http://jsfiddle.net/4nGW9/. IE8 should handle this as well.
I can see the dots fine in IE 9. Exact version as yours. Only difference in my code is a valid HTML5 doctype at the top.
Without a valid doctype IE could be switching its rendering for your page to quirks mode, or a rendering mode for IE8/IE7 which would not handle the pseudo selectors like first-child or generated content.
See your page here in browserling.
I have an application that has an initial login page that
has a user name and password input box.
This page works fine in IE 7, Safari , Firefox 4 & 5 but not
in IE 8 and 9. In IE 8/9 the user name and password display with
different size input boxes when you adjust the zoom percent.
While doing some testing I noticed in IE 8/9 the Document Mode is in Quirks Mode.
So I tried setting the Document Mode in IE 9 to IE 9 Standards mode and
the page displays correctly. However in IE 8 it has no affect.
The only thing I have been able to get to work is to redefine
the font-family in the style sheet for the input boxes. This works
for IE 7,8 and 9 and also Safari and Firefox.
I have also tried setting the DOCTYPE and meta tags but none of those
combinations seem to work in IE 8.
I included a test stylesheet and html below that reproduces
the problem.
Does anyone know why IE 8/9 would require this ? Is there another
way to handle this other than redefining the font-family ?
Thank you.
The stylesheet below works in IE 7, Safari and Firefox 4 & 5. In IE 8/9 it causes
the user name and password to display with different lengths unless I use the commented
out line:
stylesheet:
body { font-size: x-small; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;}
form { font-size: 100%; }
input { font-size: 110%; }
/*input { font-size: 110%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; }*/
INPUT.TEXT { font-size: 100%; }
select { font-size: 110%; }
textarea { font-size: 110%; }
html:
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
<body>
<table>
<tr><td>User Name: </td><td><input type=text name=username size=20 value=""></td></tr>
<tr><td>Password: </td><td><input type=password name=pass size=20></td></tr>
<tr><td> </td><td><input type=submit value=Login></td></tr>
</table>
</body>
</html>
Your input length is based on your font-size. But many form element do not inherit your font-family.
Test it with a funky font (Comic Sans MS) and a big font-size.
Related (except the first answer is wrong, input type do not inherit font-family).
You could set your input size in CSS (width:200px).
Little note : INPUT.TEXT points to no element. .text is a class.
IE is freaking me out.
my css code looks like this:
kl {
font-size:10pt;
font-weight: bold;
color:#6e90a6;
}
and my html code looks like this:
<div id="testid"><kl>test</kl>
Why does IE ignore my CSS code?
You're making custom tags? IE deals with custom tags differently than other browsers.
Why not use span and a class, I think IE6 might respond better, just a might.
<div id="testid"><span class="kl">test</span></div>
.kl {
font-size:10pt;
font-weight: bold;
color:#6e90a6;
}
I would use a css class or an id, but if YOU MUST have your custom tag, then I believe you need to define your tag in the XSL and then include that in your page in order for IE to recognize it.
Kl? Try this...
CSS:
#testid span {
font-size:10pt;
font-weight: bold;
color:#6e90a6;
}
HTML:
<div id="testid"><span>test</span></div>
Ajaxian authored an article in late 2008 that addressed the imlementation of custom tags in IE, along with the application of CSS to said tags. You can read the short paper here:
Adding Custom Tags To Internet Explorer, The Official Way
Why wouldn't you do this for your css:
#testid (
font-size:10pt;
font-weight: bold;
color:#6e90a6;
}
That should work. Although you should know IE (especially <7) is less than CSS compliant.