Make <i> tag clickable with Angular

Question

I'm using semantics UI for styling my html5 app. I added a facebook share button as follows:

<i ng-click="postToFacebook(competitor.title, competitor.votes)" class="icon facebook"></i>

But when I hover over the icon the cursor doesn't change to the hand cursor that usually appears over a clickable link.

I tried wrapping it with anchor tag:

<a><i ng-click="postToFacebook(competitor.title, competitor.votes)" class="icon facebook"></i></a>

But it just made the icon disappear completely.

Answer 1

Following @SergiuParaschiv comment on the question I add a CSS with

cursor: pointer;

And it worked.

Answer 2

You can wrap your icon in <a>, just specify href attribute to make it look like a link (place anything that does nothing in href):

<a href="javascript:"><i ng-click="postToFacebook(competitor.title, competitor.votes)" class="icon facebook"></i></a>