search

jwarby / jquery-awesome-cursor

jQuery plugin for using FontAwesome icons as custom CSS cursors
https://jwarby.github.io/jquery-awesome-cursor/
MIT License
179 stars 69 forks source link

Icons/Cursors showing as empty squares... #9

Closed nerdtech closed 9 years ago

nerdtech commented 9 years ago

hi... for some reason the icons are showing up as empty squares... i have set the plug-in up as requested but cannot get it to show any icon..... when i set font awesome on it's own to test it works fine and displays the icon but i have to use the format: 'fa fa-pencil' etc... i try it the way you suggest (just using 'pencil') and also this way but nothing works.... so not sure what's going on...

-thanks

jwarby commented 9 years ago

Hi, thanks for using Awesome Cursor, and sorry you're having some difficulty in getting it working. My first thought is that the FontAwesome font hasn't finished loading before you're trying to set a cursor... if you can provide more info and/or code samples, I can probably help you out a bit more.

nerdtech commented 9 years ago

This is my whole code... thanks... the really odd thing is if I put this code into dreamweaver and use its "live" view it works fine... just not in chrome or firefox ...

<!doctype html>
<html>
<head>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/65515511131/jquery-awesome-cursor-min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<meta charset="utf-8">
<title>Awesome Cursor Demo</title>
</head>

<body>

<script>
$(document).ready(function() {
    $('html')
        .awesomeCursor('pencil', {
        color: 'limegreen',
        size: 24,
        outline: 'brown'
    });
});
</script>

</body>
</html>
jwarby commented 9 years ago

I tried your code out, and it looks like the issue is happening because the FontAwesome font hasn't finished loading. I tried two hacks that both worked:

If this is the issue then using a font loading library to wait for the font to load would probably be a decent fix.

nerdtech commented 9 years ago

thanks jwardby for your response but neither hack works for me when viewing in chrome, firefox... really puzzling though it works perfectly in dreamweavers "live" view... that is with setting the timeout and normally... and as i have said using fontawesome normally without plugin also works fine... i can only assume there is a bug in your script... although i have gone to your demo page and it works fine... so i am really confused right now... anyway thanks again...

jwarby commented 9 years ago

Can you try it on this JSFiddle please? What versions of Chrome/Firefox are you running right now?

nerdtech commented 9 years ago

hi... when i try the jsfiddle in chrome, it doesn't work (displays empty box) until i click on the "run" button then it is fine... in firefox when i click "run" it doesn't show the pencil cursor only when I put the regular cursor to the upper left hand corner of the preview box then it shows as a pencil but with some corruption on the edges... i wanted to take a screenshot but for some reason can't capture it...

chrome version: 39.0.2171.99 m firefox: 35.0

-thanks

jwarby commented 9 years ago

OK, I would recommend trying a font loading library next. AFAIK, you should be able to wait for FontAwesome's fonts to finish loading before trying to set the cursor.

Another hack that seems to work fairly well is to use an icon in some rendered HTML before trying to set icons as cursors. I've updated the fiddle with this hack, can you try it for me?

jwarby commented 9 years ago

Hey @nerdtech, just wondering if you got it to work?

cauerego commented 9 years ago

I'm having exact same issue! I wonder if wouldn't there be some way to make jQuery awesome trigger to only start working once font awesome is loaded.

jwarby commented 9 years ago

Hi @cauerego, sorry to hear that... have you tried any of the hacks from above or using a font loading library? For most of my projects, I cheat by including a font awesome icon somewhere in the HTML before the script that calls awesomeCursor() runs (e.g. my index.html file contains a font awesome icon, then I use awesomeCursor() in my $(document).ready() callback).

cauerego commented 9 years ago

I've tried all hacks plus a few more I could think of. I haven't tried what you just suggested on purpose but by accident that's how the page was already set anyway. I am already using an fa icon, although a different one.