图标悬停效果和框的固定高度

Question

1）你能否告诉我如何在图标的css悬停效果中做出来？

2）我需要在css中设置框的固定高度。我该怎么做？

包含以下代码的网页：https://www.viktorholas.cz/

Answer 1

试试这个

.facebook {
  width:80px;
  height:80px;
  border-radius:50%;
  background:blue;
  display:flex;
  justify-content:center;
  align-items:center;
}
.facebook > a {
  text-decoration:none;
  font-size:20px;
  color:#000;
}
.facebook > a:hover > i {
  color:#fff;
  transition:all 0.3s linear;
}

HTML

<div class="facebook">
     <a href="#"><i class="fa fa-facebook"></i></a>
</div>

工作小提琴 - fiddle link

Answer 2

试试这个

这里我们使用来自cdn

的字体真棒图标

CSS

body
{
  background-color: #212121;
}
.icon{
  display:inline-block;
  height:50px;
  width:50px;
  border-radius:100px;
  text-align:center;
  line-height:50px;
  border:1px solid #000;
  color:#000;
  background-color: #fff;
}
.icon:hover{
  background-color: #3F51B5;
}
.icon:hover i.fa{
  color:#fff;
}

HTML

<div class="">
<a href="#">
  <span class="icon">
    <i class="fa fa-facebook"></i>
  </span>
  </a>
</div>

Link for reference

希望这会有所帮助..

从网站上试试这个css

颜色属性应用于图标删除并添加此css代码

CSS

.vc_icon_element-inner:hover .vc_icon_element-icon {
    color: #fff !important;
}