<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="social-media-2.css">
<div class="container">
<div class="text-center">
<div class="text-center">
<h4>Icons with text</h4>
<p>
<a class="btn btn-social btn-facebook">
<i class="fa fa-twitter" ></i> Sign in with Facebook santosh ghikire
</a>
</p>
<p>
<a class="btn btn-block btn-social btn-facebook btn-lg">
<i class="fa fa-facebook"></i> Sign in with Facebook santosh ghikire
</a>
</p>
<p><span class="btn btn-block btn-danger">Santosh Ghikmire</span></p>
<hr>
<a class="btn btn-block btn-social btn-twitter btn-lg">
<i class="fa fa-twitter"></i> Sign in with Facebook santosh ghikire
</a>
<hr>
<a class="btn btn-block btn-social btn-twitter btn-lg">
<i class="fa fa-google-plus"></i> Sign in with Facebook santosh ghikire
</a>
</div>
</div> <!-- /.row -->
</div> <!-- /.container -->
@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
.btn-social {
position: relative;
padding-left: 44px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-social :first-child {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 32px;
line-height: 34px;
font-size: 1.6em;
text-align: center;
border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.btn-social.btn-lg {
padding-left: 61px;
}
.btn-social.btn-lg :first-child {
line-height: 45px;
width: 45px;
font-size: 1.8em;
}
.btn-social.btn-sm {
padding-left: 38px;
}
.btn-social.btn-sm :first-child {
line-height: 28px;
width: 28px;
font-size: 1.4em;
}
.btn-social.btn-xs {
padding-left: 30px;
}
.btn-social.btn-xs :first-child {
line-height: 20px;
width: 20px;
font-size: 1.2em;
}
.btn-facebook {
color: #fff;
background-color: #3b5998;
border-color: rgba(0, 0, 0, 0.2);
}
.btn-facebook:hover{
color: #fff;
background-color: #30487b;
border-color: rgba(0, 0, 0, 0.2);
}
.btn-google-plus {
color: #fff;
background-color: #dd4b39;
border-color: rgba(0, 0, 0, 0.2);
}
.btn-google-plus:hover{
color: #fff;
background-color: #ca3523;
border-color: rgba(0, 0, 0, 0.2);
}
.btn-twitter {
color: #fff;
background-color: #55acee;
border-color: rgba(0, 0, 0, 0.2);
}
.btn-twitter:hover {
color: #fff;
background-color: #309aea;
border-color: rgba(0, 0, 0, 0.2);
}
