Font-awesome: Unexpected CSS token on Safari

[ghost]

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

[TriangleJuice]

It is caused by the five filter:progid:DXImageTransform.Microsoft.BasicImage code snippets, but not sure why this is or how to fix it.

[tagliala]

@josokinas could you please check the unminified file?

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css

[ghost]

@tagliala, OK. So the warnings are in following lines:

[Warning] Unexpected CSS token: : (font-awesome.css, line 104)
[Warning] Unexpected CSS token: : (font-awesome.css, line 110)
[Warning] Unexpected CSS token: : (font-awesome.css, line 116)
[Warning] Unexpected CSS token: : (font-awesome.css, line 122)
[Warning] Unexpected CSS token: : (font-awesome.css, line 128)

[tagliala]

Ok thanks

https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L104
https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L110
https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L116
https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L122
https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L128

@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

[whitecat]

So was this fixed or was it just ignored?

[tagliala]

@whitecat https://github.com/FortAwesome/Font-Awesome/issues/5043#issuecomment-64542194

[MiguelMike]

Ok, the solution is to place IE filters in dubble quotes. Has this already been fixed?

[edgariscoding]

So I still get this warning on Safari. Is core going to get updated to avoid this issue?

[antoinemenini]

Same problem for me. Does anyone have a fix?

[MiguelMike]

Here's an example that of how it should look like to prevent the errors
filter: ~"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";

[ghost]

@MiguelMike, why don't you test it on browsers (IE especially) and create a pull request?

[tagliala]

I need to be 1000% sure that this works on IE8

[ghost]

Haven't tested, but from this issue here https://github.com/less/less.js/issues/734 it looks like quotes cannot be used for IE6 and IE7, but for IE8 -ms-filter should be used instead.

Also, here it states that single or double quotes can be used: https://msdn.microsoft.com/en-us/library/ms530752(v=vs.85).aspx

[tagliala]

Sorry, I come back on my steps, also because I don't know if Dave will keep supporting IE8 in 5.0.0

filter: ~"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";

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.less

// 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

[ghost]

I guess this...

filter: ~"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";

...should be:

-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";

[dan]

bump.

[Michelle-A]

juliusosokinas solution worked for me - not sure if it works in IE8 as I haven't had a chance to test it yet

[tagliala]

[tagliala]

It works with HTML5 docs.

I need feedback from Dave on this one. If he wants to keep IE8 support in FA 5.0.0 we can address this

[ghost]

Great :+1:

[tagliala]

This will be fixed in FA 5.0.0 because we will drop support for IE8.

Leaving this open

[ghost]

That is fine, IE8 is oldskul already, but still could be better patched with v4.5.1 for anyone who still needs IE8 support...

[tagliala]

@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

[My1]

@tagliala how does it work with HTML 4 pages with properly declared doctype?

[tagliala]

@My1 Font Awesome 4.5.0 should work just fine, if you edit the css according to https://github.com/FortAwesome/Font-Awesome/issues/5043#issuecomment-148901292 to solve this issue, it will stop work

[My1]

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.

[tagliala]

@My1 I can confirm it works with properly declared HTML4/XHTML pages too.

I will edit my previous comment

[My1]

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.
I mean I have to declare a PHP script too, ya know <?php.

[tagliala]

@My1 if Dave is going to release a new 4.x version I will also include this fix

[My1]

that's nice2know.

[tagliala]

Fixed in the upcoming 4.6.0

I'm positve it works but I really hope this will not break anything

[ghost]

So...

Should the "Unexpected CSS token: :" warning still show up with Font Awesome 4.6.3 or am I missing something? It seems like it is still there.

[tagliala]

please double check that you are using 4.6.3