Sagar Singh Sagar Singh - 7 months ago 74
HTML Question

How to show font awesome icon on hover

I have a link that is editable, if someone hover on that link there should be a fa fa-edit icon on hover

Here is the html code

<a href="#" class="btn" id="company_name" data-type="text" data-pk="3" data-name="company_name" data-title="Enter Company Name">Learn web programming</a>&nbsp;<i class="fa fa-pencil"></i>


I want to show fa fa-pencil icon on hover only

Answer

Simple css can do the trick using adjacent sibling selector(+) and :hover. Also I've added slight variation in html that &nbsp; is wrapped by span for making symbol visible when it's hovers the icon.

a:hover +span+ i, /* when link is hovered select i */
a + span:hover+ i, /* when space after link is hovered select i */
a + span + i:hover { /* when icon is hovered select i */
  visibility: visible;
}

a +span+ i { /* in all other case hide it */
  visibility: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<a href="#" class="btn" id="company_name" data-type="text" data-pk="3" data-name="company_name" data-title="Enter Company Name">Learn web programming</a><span>&nbsp;</span><i class="fa fa-pencil"></i>