Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change Font Awesome icon on :hover

I hope this question was not already asked somewhere in this forum. I swear I searched it!

My goal is to change the "tag" icon when mouse is over it. Namely, I would like to let the "tags" icon appear replacing the old one.

I am quite sure there is an easy solution out there; probably using

.fa-tag:hover {
 background: url(something);
}

Here the page of my website with the .fa-tag icons : http://wordsinthebucket.com/about

Thank you in advance for your attention.

like image 791
Marco Avatar asked Dec 27 '14 16:12

Marco


People also ask

How do I change my Font Awesome icons?

Open the http://fontawesome.io/icons/ link and choose any icon you like. Just click on the needed icon, copy its class and paste to Caption field. For example, fa-user-circle-o. Save the changes and enjoy your new icon on the website!

How can I change image on hover?

This task can be simply done by using the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover. Example: HTML.

How do I change my Font Awesome icon Weight?

Change fa-weight icon size To increase fa-weight font awesome icon size, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes along with icon class fa-weight. Increase in icon size will be relative to their parent container.

How do I move Font Awesome icons to center?

The most preferred way to center Font Awesome Icons is to assign a center class to each <i> tag. Setting width to 100%, let's each icon cover 100% area horizontally. Also text-align then centers the icon accordingly to the width being used.


2 Answers

I would have two icons but have only one visible at a time, toggling them based on :hover state. I feel this is more flexible then messing with background.

.change-icon > .fa + .fa,
.change-icon:hover > .fa {
  display: none;
}
.change-icon:hover > .fa + .fa {
  display: inherit;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />

<span class="change-icon">
  Tags
  <i class="fa fa-tags"></i>
  <i class="fa fa-gear"></i>
</span>
like image 200
dfsq Avatar answered Oct 05 '22 00:10

dfsq


.fa-camera-retro:hover:before{
    content: "\f02d";
}

demo - http://www.bootply.com/oj2Io7btD7

you will need to change the content of :before pseudo element on hover

here is the list of complete fontawesome content codes

http://astronautweb.co/snippet/font-awesome/

like image 30
Vitorino fernandes Avatar answered Oct 05 '22 01:10

Vitorino fernandes