1

I have an html element like so:

<div className="sidebar-nav-main-links">
  <Link to="/home">
  <i><div id="home-icon"></div></i> 
  <p>Home</p>
  </Link> 
</div>

And my css looks like this:

i {
  #home-icon {
    background-image: image_url('clear-home-icon.png');
    width: 20px;
  }
}

But I can't get the image to display, let alone do a hover effect. Any ideas as to why this is? Also I'd like to change the image upon hover.

Amulya K Murthy
  • 130
  • 1
  • 2
  • 15
  • 2
    You need to add height as well when you set background. so just add height in current css. You div not getting any height. – Jignesh Panchal Jan 31 '20 at 05:19
  • To add hover you would need to add another css rule like this `#home-icon:hover { style in there for the hover state styles } `, again that line is sperate from the non hover styles. – Rockwell Rice Jan 31 '20 at 05:28
  • Does this answer your question? [Changing image on hover with CSS/HTML](https://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html) – Awais Jan 31 '20 at 05:50
  • Thanks everyone!! All good suggestions/solutions! –  Jan 31 '20 at 16:00

2 Answers2

0

It's better to use content instead of background-image.

Example: 

<i id="home-icon"></i>

css:

 #home-icon   {
  content: url("https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-512.png");
  width: 20px;
}

 #home-icon:hover   {
  content: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQjhOBG4ztvrvf0Jw6p_J3lMhnnKZ4TupbpIDVNy9OM38skvpi4");
  width: 20px;
}

jsfiddle: https://jsfiddle.net/2pb1oevj/

waqas Mumtaz
  • 689
  • 4
  • 12
0

You can use the following CSS with your HTML:

#home-icon   {
  background: url("abc.jpg");
  width: 20px;
  height: 16px;
  display: block;
}

 #home-icon:hover   {
  background: url("xyz.jpg");
  width: 20px;
  height: 16px;
  display: block;
}

You can adjust height/width of the icon accordingly.

Reference: Adding Custom icon to HTML Page

Amulya K Murthy
  • 130
  • 1
  • 2
  • 15