search

frequent / bartender

jQuery Mobile CSS iOS style tab bar
106 stars 24 forks source link

Using with glyphish icons? #7

Open chriswise01 opened 11 years ago

chriswise01 commented 11 years ago

Hi,

What do I need to do to make this use icons from the glyphish library? A tutorial or walkthrough for this library would be really useful.

Great tabbar by the way!

Cheers

Chris

frequent commented 11 years ago

You basically have to cut out your Glyphish icons from the background swatch I included with the other files in the repo. This is necessary, because CSS masking is not supported cross-browser.

Think of a black cardboard from which you cut out your icon shapes, so you have the cardboard with "holes" for your icons. Behind the cardboard the CSS places the blue (active) and grey (not active) gradients and toggles these on :hover.

If you have Glyphish as eps files it shouldn't be a problem to extract the respective icon's vector path. If not, you will have to manually redraw the icon's path. Place your path on the cardboard and cut out... like stitching cookies out of dough, only you keep the dough.

Not really a walkthough, but I hope it helps. Let me know if you have any other questions.