Padding Not Working Font Awesome Logos

font awesome color
font awesome icons
font awesome padding
fas font awesome
font awesome inline with text
font awesome arrow
free font awesome icons
fa-fw

So I'm kinda new to HTML and CSS, So probably there is a really obvious answer for my question. My problem is that the right padding of my Social Media icons are not working. They're inside a div and is floated to the left (default by Bootstrap).

.fa {
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  padding: 20px;
  border-radius: 100%
}

.fa:hover {
  opacity: 0.7;
}

.content2 {
  text-align: center;
}


/* Facebook */

.fa-facebook {
  background: #3B5998;
  color: white;
}


/* Twitter */

.fa-twitter {
  background: #55ACEE;
  color: white;
}


/*Google*/

.fa-google {
  background: #dd4b39;
  color: white;
}


/*Instagram*/

.fa-instagram {
  background: #125688;
  color: white;
}
<h2>Or Alternatively, You can Contact Us Via Our Social Media Shown Below.</h2>
<div class="col-md-4 col-md-offset-4">
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-google"></a>
</div>
</div>
</div>

You don't need to bother with padding - your .fa class can be better achieved with line-height

.fa {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  border-radius: 100%;
  text-decoration: none;
}

How to delete padding from Font Awesome Icon? : css, I would like to put a Font Awesome Icon after my title but the problem is all the font awesome Icons have padding which I cant delete. Thats why I've remade the NASA logo in full CSS and apply some optional style to see the layers in 3d  .fas class will only work with font-weight: 900. make sure you have font-weight: 900. you are using multiple classes fas fa-github btn btn-dark btn-lg if any of these does not have font-weight: 900 font will not show up. try this.btn { font-weight: 900; }

Here you go with a solution

.fa {
  font-size: 30px;
  text-align: center;
  text-decoration: none;
  padding: 20px;
  border-radius: 100%;
}

.fa:hover {
  opacity: 0.7;
}

.content2 {
  text-align: center;
}


/* Facebook */

.fa-facebook {
  background: #3B5998;
  color: white;
}


/* Twitter */

.fa-twitter {
  background: #55ACEE;
  color: white;
}


/*Google*/

.fa-google {
  background: #dd4b39;
  color: white;
}


/*Instagram*/

.fa-instagram {
  background: #125688;
  color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.css" rel="stylesheet"/>
<h2>Or Alternatively, You can Contact Us Via Our Social Media Shown Below.</h2>
<div class="col-md-4 col-md-offset-4">
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-google"></a>
</div>
</div>
</div>

Fixed-Width Icons, Learn how to use Font Awesome 5 to add vector icons and social logos to your Add a class of fa-fw on the HTML element referencing your icon to set one or  Since I just came across the same question I took a closer look at Christina's suggestion from the font-awesome example page (sorry, I'm not allowed to just comment yet).

You can use this code to bring your icon to the middle.

.fa {
    font-size: 30px;
    width: 50px;
    height: 50px;
    text-align: center;
    text-decoration: none;
    border-radius: 100%;
    line-height: 48px;
}

Sizing Icons, Learn how to use Font Awesome 5 to add vector icons and social logos to your Both our Web Fonts + CSS and SVG + JS frameworks include some basic  Bootstrap Icons list. The biggest collection of free Bootstrap icons. Easy to use and customize. Available in different colors, shapes, and size.

Need space around Font Awesome icons with :before/:after border , Successfully implemented, I'm seeing a solid line behind the Font Awesome icons. But the downside is that I want to add padding on each side of the icons to​  Font Awesome 5 Font Awesome 5 Intro Icons Accessibility Icons Alert Icons Animals Icons Arrows Icons Audio & Video Icons Automotive Icons Autumn Icons Beverage Icons Brands Icons Buildings Icons Business Icons Camping Icons Charity Icons Chat Icons Chess Icons Childhood Icons Clothing Icons Code Icons Communication Icons Computers Icons

CSS Icons, The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. Add the name of the specified icon class to any inline HTML  Font Awesome has grown to have over 5,000 icons and continues to add the most popular and needed icons. Stop hunting down missing icons you need, combining from multiple sets, or finding that company's official logo in a dirty corner of the internet.

Fontawesome 5 extra top and bottom padding - css - html, Not sure if this is right way to do it, but changing the line-height doesn't work for me. header of this website http://petlet.net.au/ I thought that the logo's are images but I think these logos Wordpress Font Awesome Icons CSS Padding Issues. This element has a padding of 70px. The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left). Note: Negative values are not allowed.

Comments
  • Btw if anyone needs the complete code i'll link 'em
  • How do you know it's the right padding ?
  • width 50px = 20px padding-left + icon space ---> no more place for padding-right (because bootstrap is adding box-sizing:border-box)
  • The circle around the "f" of Facebook looks a bit... squished. Is this meant to be happening?