How to customize this buttons?

[bbilal]

Hello,

I am trying to make a social buttons like Preview Here (http://prntscr.com/5eq0y9)

I am able to done 30% of it, but I don't know how to adjust the height of buttons and align the text next to icons properly!

So far I have code this.



<div class="post-head">
<!-- Twitter -->
<a href="http://twitter.com/home?status=" title="Share on Twitter" target="_blank" type="button" class="btn btn-twitter"><i class="fa fa-twitter"></i>Share on Twitter</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=" title="Share on Facebook" target="_blank" class="btn btn-facebook"><i class="fa fa-facebook"></i>Share on Facebook</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=" title="Share on Google+" target="_blank" class="btn btn-googleplus"><i class="fa fa-google-plus"></i>Share on Google+</a>
<!-- StumbleUpon -->
<a href="http://www.stumbleupon.com/submit?url=" title="Share on StumbleUpon" target="_blank" data-placement="top" class="btn btn-stumbleupon"><i class="fa fa-stumbleupon"></i> Stumbleupon</a>
</div>





.post-head{
font-size: 14px;
margin-bottom: 30px;
}

.btn-twitter {
background: #00acee;
border-radius: 0;
color: #fff;
}
.btn-twitter:link, .btn-twitter:visited {
color: #fff
}
.btn-twitter:active, .btn-twitter:hover {
background: #0087bd;
color: #fff
}
.btn-facebook {
background-color: #3b5998;
border-color: #3b5998;
}
.btn-facebook:link, .btn-facebook:visited {
color: #fff
}
.btn-facebook:active, .btn-facebook:hover {
background: #30477a;
color: #fff
}
.btn-googleplus {
background: #e93f2e;
border-radius: 0;
color: #fff
}
.btn-googleplus:link, .btn-googleplus:visited {
color: #fff
}
.btn-googleplus:active, .btn-googleplus:hover {
background: #ba3225;
color: #fff
}
.btn-stumbleupon {
background: #f74425;
border-radius: 0;
color: #fff
}
.btn-stumbleupon:link, .btn-stumbleupon:visited {
color: #fff
}
.btn-stumbleupon:active, .btn-stumbleupon:hover {
background: #c7371e;
color: #fff
}
.btn-linkedin {
background: #0e76a8;
border-radius: 0;
color: #fff
}
.btn-linkedin:link, .btn-linkedin:visited {
color: #fff
}
.btn-linkedin:active, .btn-linkedin:hover {
background: #0b6087;
color: #fff
}

.fa {
margin-right: 8px;
display: inline-block;
font-size: 18px;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.fa-sitename {
// Add CSS here to target individual buttons
}


Any help will be highly appreciate (:

Many Thanks,
Bilal

[Beverleyh]

It will be easier to offer suggestions based on a live example, where we can make live edits in the browser's developer tools screen, against the actual icons/icon fonts that you're using.

Please provide a link to your page.

[bbilal]

Thank You Beverleyh!

I have resolved this my own :)

How to delete or closed this thread?

[james438]

better yet you can edit your first post then go to the advanced settings and mark this thread as resolved. If possible can you detail what you did to fix your problem so that others that come across this thread later with a similar problem can see how you were able to solve this problem?