WordPress Font Awesome Icons CSS Padding Issues

1 Views

I have trawled the internet looking for a fix and i still cannot get padding to work on my FA Icons in a wordpress theme.

Caution, I am novice:

Read More

So, the icons are social media icons, using FA, and they are placed in a widget in the footer of the site.

I think i have assigned a class to the icons “social” but I have placed: 

.social {
    padding-left:20px;
}

In all style.css or custom.css or theme related .css’s I can find and the icons still only have around 3px of padding, widget code is as follows: 

<p>
<a target="_blank" href="link"><i class="fa fa-twitter-square fa-4x" class="social"></i></a>
<a target="_blank" href="link"><i class="fa fa-facebook-square fa-4x" class="social"></i></a>
<a target="_blank" href="link"><i class="fa fa-instagram fa-4x" class="social"></i></a>
<a target="_blank" href="link"><i class="fa fa-pinterest-square fa-4x" class="social"></i></a>
</p>

I’m sure I am missing something simple?

Regards,

Thomas

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Add the social class to the same attribute:

    <i class="fa fa-pinterest-square fa-4x social"></i>

    Change the css property to:

    .social {
    padding-left:20px !important;
}

    Please note that the css properties are assigned in the order they were defined in the css files. You must be sure that the .social is the last defined, in order to assign the padding-left you need.