是否可以使用 bootstrap 将图标（fontawesome）作为按钮？

Question

希望你一切都好。我想做的是使用带有 fontawesome 的图标，并能够将其用作按钮。这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="row text-center">
            <div class="col-6 align-items-stretch">
                <i class=""></i>
                 <a href="https://github.com/IsmaElzem?tab=repositories" class="fas fa-at fa-3x mt-3"></a>
                <p class="h5">Mail</p>
            </div>
            <div class="col-6 align-items-stretch">
                 <a href="https://www.linkedin.com/in/isma%C3%ABl-zemmouj-02b235128/" class="fab fa-linkedin fa-3x mt-3"></a>
                <p class="h5">LinkedIn</p>
            </div>
        </div>
    </div>
   </body>
</html>

但是如果您正在查看结果，图标现在是蓝色的，并且下方有一条线。可不可以不要这个颜色，请把图标下面的线去掉？

亲切

Answer 1

这个css代码怎么样？

a {
  text-decoration: none;
  color: red;
}

Answer 2

您需要添加一些额外的 CSS 才能执行此操作。这可以帮助

a{
  text-decoration:none;
  color:orange;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

 <style>
  a{
  text-decoration:none;
  color:orange;
  }
 </style>
  </head>
  <body>
    <div class="container">
      <div class="row text-center">
            <div class="col-6 align-items-stretch">
                <i class=""></i>
                 <a href="https://github.com/IsmaElzem?tab=repositories" class="fas fa-at fa-3x mt-3"></a>
                <p class="h5">Mail</p>
            </div>
            <div class="col-6 align-items-stretch">
                 <a href="https://www.linkedin.com/in/isma%C3%ABl-zemmouj-02b235128/" class="fab fa-linkedin fa-3x mt-3"></a>
                <p class="h5">LinkedIn</p>
            </div>
        </div>
    </div>
   </body>
</html>

是否可以使用 bootstrap 将图标（fontawesome）作为按钮？

Is it possible to have an icon (fontawesome) as a button using bootstrap?

html

css

font-awesome

bootstrap-4