CODEWITHSUNDEEP
htmlcss
Tom1999
Tom1999

Reputation: 193

Font awesome icon as a html link

I created two links for my projects and I would like to increase to size of the github icon to take at least 80% of the space within the green box.

However, I am using padding to create my buttons, so when I am increasing the size of my icon, the button also increases. buttons

html

                <div class="project-links">
                    <a href="" class="website">Visit website</a>
                    <a class="github" href=""><i class="fab fa-github-square"></i> </a>
                </div>

css

.project-links

{
  text-align: center;
}

.project-links a{
  background-color: #4CAF50; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;

}

Upvotes: 0

Views: 253

Answers (3)

SAURABH
SAURABH

Reputation: 137

Here is the possible solution you are looking for:- use <i class="fab fa-github-square fa-4x"></i> and reduce the padding only for you github icon to adjust according like :-

.project-links a fa-github-square {
  padding: 5px 10px;
}

Upvotes: 0

pacukluka
pacukluka

Reputation: 735

You can use

transform: scale(size_multiplier);

To scale the icon without it changing the container/button size or center point (unlike font-size and fa-[size])

/* magic happens here */
.icon{
  transform: scale(3);
}

.project-links
{
  text-align: center;
}

.project-links a{
  background-color: #4CAF50; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;

}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<div class="project-links">
  <a href="" class="website">Visit website</a>
  <!-- changed fab to fa, you can use fab -->
  <a class="github" href=""><i class="fa fa-github-square icon"></i> </a>
</div>
</body>

Upvotes: 1

Simone Rossaini
Simone Rossaini

Reputation: 8162

You can simple add font size of icon, add <i class="fab fa-github-square fa-4x">

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Upvotes: 3

Related Questions