Question

自最近三天以来，我一直在尝试使事情变得简单，我查看了许多主题并应用了相同的代码，但没有一个起作用。

我有3个图标 1通话 2服务 3张票请再说一件事，告诉我是否有UI html和css构建器，而不是编码，我本周真的很讨厌它。下面的代码不是我的，它来自youtube。

我想让每个图标带有文字标签，并且应该位于图标下方，而不是.i仍然在html和css中使用。

body{
  padding: 0;
  margin: 0;

}


.middle{
  position: absolute;
  top: 70%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}
.btn{
  display: inline-block;
  width: 90px;
  height: 90px;
  background: #f1f1f1;
  margin: 10px;
  border-radius: 100%;
  box-shadow: 0 5px 15px -5px #00000070;
  color: #1;
  overflow: hidden;
  position: relative;
}
.btn i{
  line-height: 90px;
  font-size: 26px;
  transition: 0.2s linear;
}
.btn:hover i{
  transform: scale(1.3);
  color: #f1f1f1;
}
.btn::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #fbc531;
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}
.btn:hover::before{
  animation: aaa 0.7s 1;
  top: -10%;
  left: -10%;
}
@keyframes aaa {
  0%{
    left: -110%;
    top: 90%;
  }50%{
    left: 10%;
    top: -30%;
  }100%{
    top: -10%;
    left: -10%;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <title></title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
      </head>



    <div class="middle">
      <a class="btn" href="">
         <i class="fas fa-headset">call</i>
           </a>
      <a class="btn" href="">
          <i class="fas fa-hands-helping">services</i>
          </a>
      <a class="btn" href="">
          <i class="fas fa-ticket-alt">ticket</i>
             </a>

      </a>
    </div>
  </body>
</html>

Answer 1

如果需要，可以将其作为标题添加，例如icon标记中的title =“ call”。当您将鼠标悬停在该图标上时，它将显示。要么其他您可以像按钮一样

  <button>Call <i class="fa fa-headset"></i> </button>

Answer 2

您可以尝试在图标后添加跨度。

<span>Call</span>

如何在每个fontawsome图标下放置文本？

2 个答案: