CODEWITHSUNDEEP
htmlcssbootstrap-4font-awesome
Balaure
Balaure

Reputation: 117

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

Hope you're fine. What I'm trying to do is using an icon with fontawesome, and be able to use it as a button. Here is my code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

But if you are looking at the result, the icon is now bleu and there is a line under it. Is it possible to not have this color and remove the line under the icon please ?

Cordially

Upvotes: 1

Views: 57

Answers (2)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8098

You will need to add some extra CSS to do this. This can help

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


<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 2

Kevin Shuguli
Kevin Shuguli

Reputation: 1749

How about this css code?

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

Upvotes: 1

Related Questions