我有一些社交媒体图标使用引导字体-很棒的图标。我的问题是图标没有居中。
这里是我的代码，它的大部分是从一个在线来源复制和粘贴。
#HTML
<!-- Add font awesome icons -->
<div class="social-btns">
<a class="btn facebook" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
<a class="btn linkedin" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a class="btn instagram" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a class="btn flickr" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
<a class="btn github" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>
#CSS
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
-webkit-transition: all 0.35s;
transition: all 0.35s;
-webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
top: 90%;
left: -110%;
}
.social-btns .btn .fa {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.social-btns .btn.facebook:before {
background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
color: #3b5998;
}
.social-btns .btn.instagram:before {
background-color: sandybrown;
}
.social-btns .btn.instagram .fa {
color: sandybrown;
}
.social-btns .btn.google:before {
background-color: #dc4a38;
}
.social-btns .btn.google .fa {
color: #dc4a38;
}
.social-btns .btn.flickr:before {
background-color: hotpink;
}
.social-btns .btn.flickr .fa {
color: hotpink;
}
.social-btns .btn.github:before {
background-color: black;
}
.social-btns .btn.github .fa {
color: black;
}
.social-btns .btn.linkedin:before {
background-color: royalblue;
}
.social-btns .btn.linkedin .fa {
color: royalblue;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
top: -10%;
left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
color: #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
.social-btns {
margin: auto;
font-size: 0;
text-align: center;
position: inherit;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.social-btns .btn {
display: inline-block;
background-color: #fff;
width: 5em;
height: 5em;
margin: 0 10px;
text-align: left;
vertical-align: middle;
line-height: 50%;
position: relative;
overflow: hidden;
border-radius: 28%;
box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
opacity: 0.99;
}
.social-btns .btn:before {
content: '';
width: 120%;
height: 120%;
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.social-btns .btn .fa {
font-size: 2.5em;
vertical-align: middle;
}
我也希望它适用于移动以及。我已经玩了一些边距和文本对齐，但似乎没有什么工作如预期。感谢任何帮助。
您只需添加.social-btns.btn{padding:18px 18px；}
null
.social-btns .btn{padding: 18px 18px;}
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
-webkit-transition: all 0.35s;
transition: all 0.35s;
-webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
top: 90%;
left: -110%;
}
.social-btns .btn .fa {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.social-btns .btn.facebook:before {
background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
color: #3b5998;
}
.social-btns .btn.instagram:before {
background-color: sandybrown;
}
.social-btns .btn.instagram .fa {
color: sandybrown;
}
.social-btns .btn.google:before {
background-color: #dc4a38;
}
.social-btns .btn.google .fa {
color: #dc4a38;
}
.social-btns .btn.flickr:before {
background-color: hotpink;
}
.social-btns .btn.flickr .fa {
color: hotpink;
}
.social-btns .btn.github:before {
background-color: black;
}
.social-btns .btn.github .fa {
color: black;
}
.social-btns .btn.linkedin:before {
background-color: royalblue;
}
.social-btns .btn.linkedin .fa {
color: royalblue;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
top: -10%;
left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
color: #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
.social-btns {
margin: auto;
font-size: 0;
text-align: center;
position: inherit;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.social-btns .btn {
display: inline-block;
background-color: #fff;
width: 5em;
height: 5em;
margin: 0 10px;
text-align: left;
vertical-align: middle;
line-height: 50%;
position: relative;
overflow: hidden;
border-radius: 28%;
box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
opacity: 0.99;
}
.social-btns .btn:before {
content: '';
width: 120%;
height: 120%;
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.social-btns .btn .fa {
font-size: 2.5em;
vertical-align: middle;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Add font awesome icons -->
<div class="social-btns">
<a class="btn facebook" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
<a class="btn linkedin" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a class="btn instagram" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a class="btn flickr" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
<a class="btn github" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>
使用此HTML代码：
<div class="social-btns">
<a class="btn facebook text-xs-center" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a class="btn google text-xs-center" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
<a class="btn linkedin text-xs-center" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a class="btn instagram text-xs-center" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a class="btn flickr text-xs-center" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
<a class="btn github text-xs-center" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>
