CODEWITHSUNDEEP
htmlcssfont-awesome
Zaki
Zaki

Reputation: 11

How to resize social media Icon?

Trying to make the social media icon bigger. Ive tried height, width, and font-size syntax but nothing changes.

<h3>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-instagram"></a>
</h3>

.fa-instagram {
  color: #e4c95e;
  height: 100px;
  width: 100px;
  font-size: 100px;
}

Upvotes: 1

Views: 1692

Answers (3)

erikafunny
erikafunny

Reputation: 1

I think it's because you don't have the font linked. Here's a quick example of what I think you are missing on your HTML page:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

Upvotes: 0

Jesse
Jesse

Reputation: 1425

Font Awesome does have some built-in classes for resizing icons (relative sizing table from link):

Relative Sizing Class Font Size Equivalent in Pixels
fa-2xs 0.625em 10px
fa-xs 0.75em 12px
fa-sm 0.875em 14px
fa-lg 1.25em 20px
fa-xl 1.5em 24px
fa-2xl 2em 32px

However, you can also resize icons manually using the font-size CSS property. Let me explain.

When you use a Font Awesome icon class, it uses CSS to add an obscure Unicode character to the page. The font file provided by Font Awesome then tells the browser to render that character as the associated icon. This means that as far as the browser is concerned, these icons are just text.

Example:

.font-50{
  font-size: 50px;
}

.font-100{
  font-size: 100px;
}
<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet"/>


<h3>Normal</h3>
<i class="fa fa-camera"></i>

<h3>50px</h3>
<i class="fa fa-camera font-50"></i>

<h3>100px</h3>
<i class="fa fa-camera font-100"></i>

Upvotes: 1

Syaifal Illahi Refactory
Syaifal Illahi Refactory

Reputation: 71

If you're using font awesome, add this in your class name

<h3>
 <a href="#" class="fa fa-facebook fa-1x"></a>
 <a href="#" class="fa fa-twitter fa-2x"></a>
 <a href="#" class="fa fa-instagram fa-3x"></a>
</h3>

Please see the official documentation for font awesome https://fontawesome.com/docs/web/style/size

Upvotes: 3

Related Questions