Link clickability problem in Chrome

[trustmaster]

I'm trying to use Foundation Icon set together with Foundation itself to make clickable icons, but there seems to be a problem: the links are not clickable in Google Chrome. Example link:

<a href="/remove/"><i class="foundicon-remove"></i></a>

The icon changes its color but when you hover it the cursor doesn't change and it is not clickable.

I've tried to use icons as links in demo.html shipped with the icon font and it worked there. However, if I download Foundation build with some templates, add Foundicons e.g. to blog.html and try to make an icon link there, it doesn't work.

Icon links work fine in Firefox, but they don't work in Chrome 23.

Any ideas how to fix this?

[badslug]

I'm seeing the same thing in Safari 6.0.2 on Mac on my own html. It must be a style conflict but I haven't had time to work out where it's losing it's "clickability" (it also doesn't cause a mouse pointer change or hover styles so the icon is not a link and not text as far as the browser knows). I've been wrapping icons in Foundation button styles and that works (because the whole button is a link).

A really weird work around I've found is to set the line-height for the anchor tag or icon <i> to a height that is not the standard/inherited line height. (e.g. my default line height in Foundation is 18px so I set it to 12px). For whatever reason that seems to make it work as a link again.

<a style="line-height: 12px" href="/remove/"><i class="foundicon-remove"></i></a>

or

<a href="/remove/"><i style="line-height: 12px" class="foundicon-remove"></i></a>

Both/either seems to work. I'm assuming this is touching on the root cause but I haven't had a chance to look into exactly why this is causing a problem. Hopefully someone can figure out why this is happening and bake a fix into the core css.

[trustmaster]

@IainShigeoka This workaround helped, thank you!

[yepes]

Setting display to blog or inline-block solved my issue too

[class*="foundicon-"] { display: inline; width: auto; height: auto; line-height: inherit; vertical-align: baseline; background-image: none; background-position: 0 0; background-repeat: repeat; display: inline-block; }

[KrisBraun]

Adding display: inline-block worked for me, too. I needed the following selector to take precedence:

i[class*="foundicon-"] {
  display: inline-block;
}

[vurral]

Why is it then orignially set to display: inline ?

[Sanabria]

The display:inline-block did the trick for me, thanks!

[jpitters3]

"display:inline-block" works like a charm. Fix confirmed. Thanks for posting!

[Gusduenas]

Thanks guys "display:inline-block" worked perfectly...Confirmed from safari on osx 10.5.8 g5 mac ( that means I cannot use Chrome :( )

[dev-ext]

Work fine. Issue happened in chrome mobile device. Thanks.

[LuisCarlosSegreraVisbal91]

Hello guys!

Guys, i'm working in a website right now, and i need to know how i can do the next

<a href="http://nameofblog.blogspot.com.co/"><i class="social foundicon-blogspot"></i> BlogsPot</a>  BlogsPot

but i dont find the icon to represent the blogspot icon like i do with linked in, twitter and instagram, for example,

<a href="https://www.linkedin.com/"><i class="social foundicon-linkedin"></i> Linked in</a>
<a href="https://twitter.com/"><i class="social foundicon-twitter"></i> Twitter</a>
<a href="https://www.instagram.com/"><i class="social foundicon-instagram"></i> Instagram</a>

 Linked in  Twitter  Instagram

thanks for your help!