New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unexpected CSS token on Safari #5043
Comments
It is caused by the five |
@josokinas could you please check the unminified file? //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css |
@tagliala, OK. So the warnings are in following lines: [Warning] Unexpected CSS token: : (font-awesome.css, line 104) |
Ok thanks https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L104 @TriangleJuice is right, there is nothing we can do. Those are rules for IE8. If you are not interested in IE8 you could customize the stylesheet and remove the above lines Hope it helps Closing here |
So was this fixed or was it just ignored? |
Ok, the solution is to place IE filters in dubble quotes. Has this already been fixed? |
Same problem for me. Does anyone have a fix? |
Here's an example that of how it should look like to prevent the errors |
@MiguelMike, why don't you test it on browsers (IE especially) and create a pull request? |
I need to be 1000% sure that this works on IE8 |
Haven't tested, but from this issue here less/less.js#734 it looks like quotes cannot be used for IE6 and IE7, but for IE8 Also, here it states that single or double quotes can be used: https://msdn.microsoft.com/en-us/library/ms530752(v=vs.85).aspx |
Sorry, I come back on my steps, also because I don't know if Dave will keep supporting IE8 in 5.0.0
This does not work in IE8 If you do not need IE8 support, please consider a custom build, you just need to override mixins.less / .scss removing the offending line Eg of // Mixins
// --------------------------
.fa-icon() {
display: inline-block;
font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-icon-rotate(@degrees, @rotation) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees);
transform: rotate(@degrees);
}
.fa-icon-flip(@horiz, @vert, @rotation) {
-webkit-transform: scale(@horiz, @vert);
-ms-transform: scale(@horiz, @vert);
transform: scale(@horiz, @vert);
} Closing here |
I guess this...
...should be:
|
bump. |
Great 👍 |
This will be fixed in FA 5.0.0 because we will drop support for IE8. Leaving this open |
That is fine, IE8 is oldskul already, but still could be better patched with v4.5.1 for anyone who still needs IE8 support... |
@juliusosokinas that would be an intentional breaking change, because rotated icons on non-properly declared pages will stop working on IE8 We can't do this on 4.x releases |
@tagliala how does it work with HTML 4 pages with properly declared doctype? |
@My1 Font Awesome 4.5.0 should work just fine, if you edit the css according to #5043 (comment) to solve this issue, it will stop work |
I wanted to ask about your test cases. a properly delcared HTML5 page works with the change, a non-properly declared (more or less HTML4) page doesnt work, but the intresting question is a properly declared HTML4 page, AND the reason why it suddenly works when a page is decalred as HTML5. |
@My1 I can confirm it works with properly declared HTML4/XHTML pages too. I will edit my previous comment |
so essentially the only victims are those who arent properly declaring HTML, doesnt sound so breaking to me anymore, I mean before going to advanced stuff like webfonts prople should learn the most basic basics yet, and that would be for example delaring HTML. |
@My1 if Dave is going to release a new 4.x version I will also include this fix |
that's nice2know. |
Caused by `filter: progid:DXImageTransform.Microsoft.BasicImage` css property. Since we are addressing IE >= 8 and valid HTML5 templates, we can use `-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage”` to get the same result Fix #5043
Fixed in the upcoming 4.6.0 I'm positve it works but I really hope this will not break anything |
Caused by `filter: progid:DXImageTransform.Microsoft.BasicImage` css property. Since we are addressing IE >= 8 and valid HTML5 templates, we can use `-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage”` to get the same result Fix #5043
please double check that you are using 4.6.3 |
I do get 5 warnings with "Unexpected CSS token: :" on Safari for Mac browser (on line 4, though it's minimised).
Using CDN: maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
The text was updated successfully, but these errors were encountered: