Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS slightly complex icons – Icon Font or Sprite?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #45190
    isaacgregson
    Member

    Greetings. On a current project, there are some design elements that I’d normal simply make into an icon font, mostly because they reoccur throughout the design. For hover effects especially, this seems to be the best way to go. The only catch is that these images aren’t one solid color. Part of the elements are a bit transparent while other parts are solid.

    [Here’s a link to the image.](http://isaacgregson.com/images/public/elements.jpg “”)

    Here’s the question: would you all just make them into a PNG and use them as a normal image (creating a sprite and so on)? Or, is there a way to create icon fonts from more complex images (with varying transparencies on the image)?

    And, if the image route is the only viable option, what the current (general consensus) “best practice” for changing the image color on hover (originally done with pure html, correct?)?

    #136979
    isaacgregson
    Member

    **Update**
    [Here’s a perfect example](http://macrabbit.com/slicy/) of the type icons I’m wondering how to best create. Just look at the icons in their top navigation elements. They have gradients, and then on hover they go to a whole color version. What are some different approaches to achieve this effect?

    #136991
    isaacgregson
    Member

    Thanks for the insight, Mottie. Yes, I too decided that the best option is to make an image sprite. I’ve just finished using Compass for it… incredibly easy! Almost **too** easy.

    #137006
    Koopa
    Participant

    i would go for an svg

    #137057
    inkbeard
    Member

    Honestly, I think you’d be better off with a sprite and would set it up exactly how it is on MacRabbit (except put all of your images on one sprite). Have your hover with opacity of 0 and absolutely positioned over it and when hovering over just transition your opacity to 1. Easy Peasy. Another example is in the list nav on Pete Pona’s site as well.

    Cheers.

    #137058
    inkbeard
    Member

    sorry about that, I put in code mode but it doesn’t look like I can swith it around….awesome….

    #137060
    Paulie_D
    Member

    Fixed code issue

    #137115
    isaacgregson
    Member

    Many thanks, inkbeard… did the trick!

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.