Spinner icon advice

147 views
Skip to first unread message

Kaan Soral

unread,
Mar 22, 2015, 2:39:23 AM3/22/15
to ico...@googlegroups.com
I've tested font-awesome's circle-o-notch, yet the icon seems to spin asymmetrically, I've checked the CSS, nothing to indicate an issue

When inspected, it can be seen that the icon spins outside the zone the browser allocates, the parts that get out of the zone are truncated, therefore the icon looks glitched, as the edges get cut out

font-awesome 3's .icon-spin.icon-spinner doesn't suffer from this issue in the same setup

I've also tested using a custom icon spin class to spin the icomoon icons, yet the result is the same

Could the issue be related to icomoon's icon handling? / What's the best way to spin icomoon icons?

Keyamoon

unread,
Mar 22, 2015, 5:31:24 AM3/22/15
to ico...@googlegroups.com
Did you check the icon using the edit panel in IcoMoon to see if it's actually centered? To bring up the edit panel, press the pencil button in the toolbar on top and then click on your icon. Maybe the icon itself isn't centered in its canvas.

Here's an example showing IcoMoon icons spinning: http://codepen.io/Keyamoon/pen/aHxuq

Kaan Soral

unread,
Mar 22, 2015, 6:05:32 AM3/22/15
to ico...@googlegroups.com
Thanks for the reply and the code snippet, here is the issue: http://codepen.io/anon/pen/ogJJWr - your examples work perfectly tho

The original icon is originally a spinner, could this situation be caused by my mixed grid? It's currently 14/16/32 it seems

Keyamoon

unread,
Mar 22, 2015, 6:42:38 AM3/22/15
to ico...@googlegroups.com
I looked at your loading icon (using the edit panel). It looks like it wasn't properly designed. It's cut off at the bottom. For IcoMoon's spinners, I use a square canvas and make sure that the shape is exact and symmetric.

Kaan Soral

unread,
Mar 22, 2015, 6:51:35 AM3/22/15
to ico...@googlegroups.com
That didn't occur to me, since I had a blind trust in font-awesome, yet looking at the examples: http://fortawesome.github.io/Font-Awesome/examples/ - that seems to be the case in the current state, those spinners also doesn't spin symmetrically

Once again, Thanks a lot for your help, I will use icomoon's spinners instead, I find the cut-out circle design pretty cool tho, it would be nice if something like that was added to icomoon, yet looking at the spinner-set, it might not be needed

Keyamoon

unread,
Mar 22, 2015, 7:25:54 AM3/22/15
to ico...@googlegroups.com
I will add a similar spinner to IcoMoon's icon pack in the next update.
Reply all
Reply to author
Forward
0 new messages