我的搜索图标在转换后消失

Question

我在我的网站上添加了一个带有 awesome 字体的搜索图标，它有一个向左的过渡，但由于某种原因，当我悬停并且开始过渡时，字体 awesome 图标消失了。我很难弄清楚这一点，因为它在我的 CodePen 上运行良好。

请点击下面的 link 查看我网站上的代码。

Answer 1

考虑将 display: flex; 添加到搜索框。

我在 firefox 中检查了您的网站并添加了 display: flex;到搜索框并且有效。

Answer 2

.search-box{
    display: inline-flex;
}
.search-btn{
    background: #2f3640;
}

Answer 3

另一个解决方案

添加关注CSS

 .#mybottomnav .items .item .search-box {
      min-width: 52px;
  }

  .#mybottomnav .items .item .search-box .search-btn {
      position: absolute;
      right: 10px;
      /*float: right;*/ //remove this css
  }

Answer 4

这里是您可以添加以使其工作的更改，我添加了 position: absolute 以及 left、top 属性，并为搜索框容器添加了 min-width 以防止容器折叠因为里面的内容没有默认值：

#mybottomnav .items .item .search-box {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(0, -50%);
  background: #2f3640;
  height: 50px;
  border-radius: 50px;
  min-width: 50px;
  padding: 5px 10px 10px 10px;
}

#mybottomnav .items .item .search-box .search-btn {
  position: absolute;
  color: lightblue;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.4s;
  right: 10px;
  top: 10px;
}

注意：删除此 CSS #mybottomnav .items .item .search-box:hover > .search-btn

我的搜索图标在转换后消失

My Search Icon Disappears after Transition

html

css

font-awesome