Почему моя иконка не отображается на моей веб-странице и как мне сделать эффект наведения? - PullRequest
Новая
       51

Почему моя иконка не отображается на моей веб-странице и как мне сделать эффект наведения?

1 голос
/ 31 января 2020

У меня есть html элемент, подобный так: 

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

И мой css выглядит так: 

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

Но я не могу получить изображение для отображения не говоря уже о парящих эффектах. Есть идеи, почему это так? Также я хотел бы изменить изображение при наведении.

Ответы [ 2 ]

0 голосов
/ 31 января 2020

Вы можете использовать следующие CSS с вашим 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;
}

Вы можете соответствующим образом настроить высоту / ширину значка.

Ссылка: Добавление пользовательских значок HTML Страница

0 голосов
/ 31 января 2020

Лучше использовать контент вместо background-image.

Пример: 

<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/

...