Making it work with font-awesome-rails

[DannyBen]

Is there a way to make it work with font-awesome-rails?

My guess is that it should be simple, but something is not working for me.

I have done this:

• Placed the minified js in the vendor/assets/javascripts folder
• I already had @import font-awesome in my main scss (not using sprockets 'require' for css)
• I have added //= require awesome-cursor to my main js file
• Added a test call like $('body').awesomeCursor('check');

The result is that I can see it is responding, so everything is in place, but I do not see an icon - instead I see the outline rectangle that appears whenever the font is not recognized.

My CSS are loaded before my JS files, if that makes any difference (tried the other way around, with worse result).

[jwarby]

This sounds like the loading issue (#9) or something similar - probably worth trying a few of the suggestions and workarounds mentioned in that issue's comments first if you haven't already.

I'm not familiar with Rails so I probably can't help much but first thing to check would be trying to get any Font Awesome icon to render, to be certain the font is being pulled in and loaded. Next would be to make sure the font has finished loaded - try sticking your $('body').awesomeCursor('check'); in a $(document).ready call if it's not already. Even though you are loading your CSS first, that doesn't necessarily mean the fonts referenced within have finished loading. There's an overview of the CSS @font-face rule at https://css-tricks.com/snippets/css/using-font-face/ which may aid debugging this issue.

Hope this helps somewhat....

[DannyBen]

Well - font awesome is definitely loaded, I am using it all over the site, and the test call is indeed within a ready function. Will look at the referenced issue, and if no luck, maybe I will open a ticket in the font awesome rails repo.

[jwarby]

Ah ok, in that case the hacks in issue #9 probably won't help at all. What happens if you pop the browser console and do $('body').awesomeCursor('check'); ? Also, what browser (incl. version) are you running?

[DannyBen]

When used in the console, the icons load just fine. So I guess its some sort of ordering problem or something.

Using the latest Chrome (Version 44.0.2403.157) on Windows 10

[jwarby]

Yeah just sounds like the font hasn't finished loading then. Perhaps you could double-check this theory by wrapping $('body').awesomeCursor('check'); in a setTimeout call and seeing what the result is?

[DannyBen]

Yes, setTimeout makes it work.

So, doesn't it mean that the problem is here and not there? I mean, is there a way for you to wait until the font loads before doing your canvas things?

[rmm5t]

@DannyBen Coming here from the font-awesome-rails issue that you opened.

What happens if you instead call it from a true onload event. For example:

$(window).load(function() {
  $('body').awesomeCursor('check');
});

If that doesn't work...(while I don't understand why), I suspect fonts might load after onload fires based on this StackOverflow question, maybe this set of answers lead to a solution:

http://stackoverflow.com/questions/4383226/using-jquery-to-know-when-font-face-fonts-are-loaded

[DannyBen]

@rmm5t - thanks, it works!

Using the onload event is working.

Now the question is - is this only an issue with font-awesome-rails, or a problem that other awesome-cursor users may encounter. If its the former, maybe you can share what is done differently in font-awesome-rails that may cause it to behave differently, so that it can be properly patched or documented in awesome-cursor.

[jwarby]

Glad you've got it working! :+1: Thanks for your assistance @rmm5t!

Anyone using awesome-cursor could potentially encounter this issue - it happens when awesome-cursor is used before the font has finished loading. If $(window).load is a solid fix then I'll add it to the README/docs.