无法创建字体真棒图标之间的空间
问题描述:
我想在我的4 fa-icons
之间获得一些空间,以便在页面之间传播更多空间。我希望他们占用页面的75%。该HTML
和伴随CSS
如下所示:无法创建字体真棒图标之间的空间
.fa-icons {
padding: 15px;
text-align: center;
}
.icon-background-face {
color: #3b5998;
}
.fa-facebook {
color: #fff;
}
.facebook i {
margin-right: 100px;
}
.icon-background-twit {
color: #00aced;
}
.fa-twitter {
color: #fff;
}
.icon-background-tube {
color: #bb0000;
}
.fa-youtube {
color: #fff;
}
.icon-background-env {
color: #000000;
}
.fa-envelope {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="fa-icons">
<span class="fa-stack fa-5x">
<a href="" target="_blank">"
<i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
<i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
<i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
<i class="fa fa-youtube fa-1x fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="">
<i class="fa fa-circle fa-stack-2x icon-background-env"></i>
<i class="fa fa-envelope fa-1x fa-stack-1x"></i>
</a>
</span>
</div>
答
只需使用margin
这样的:
.fa-stack {
margin-right: 10px; <-- change accordingly
}
的最后一个div创建一个自定义的类名,并添加margin-right: 0;
,以防止不必要的该div后的余量。
答
您可以简单地添加缘至fa
S,请看下面的例子:
.fa-icons {
padding: 15px;
text-align: center;
}
.fa-icons span {
margin: 0 20px;
}
.icon-background-face {
color: #3b5998;
}
.fa-facebook {
color: #fff;
}
.facebook i {
margin-right: 100px;
}
.icon-background-twit {
color: #00aced;
}
.fa-twitter {
color: #fff;
}
.icon-background-tube {
color: #bb0000;
}
.fa-youtube {
color: #fff;
}
.icon-background-env {
color: #000000;
}
.fa-envelope {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="fa-icons">
<span class="fa-stack fa-5x">
<a href="" target="_blank">"
<i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
<i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
<i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
<i class="fa fa-youtube fa-1x fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="">
<i class="fa fa-circle fa-stack-2x icon-background-env"></i>
<i class="fa fa-envelope fa-1x fa-stack-1x"></i>
</a>
</span>
</div>
答
.fa-icons {
text-align: center;
width: 75%;
display: table;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.fa-icons>span{
display: table-cell;
vertical-align:top;
}
.icon-background-face {
color: #3b5998;
}
.fa-facebook {
color: #fff;
}
.icon-background-twit {
color: #00aced;
}
.fa-twitter {
color: #fff;
}
.icon-background-tube {
color: #bb0000;
}
.fa-youtube {
color: #fff;
}
.icon-background-env {
color: #000000;
}
.fa-envelope {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="fa-icons">
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
<i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
<i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
<i class="fa fa-youtube fa-1x fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="">
<i class="fa fa-circle fa-stack-2x icon-background-env"></i>
<i class="fa fa-envelope fa-1x fa-stack-1x"></i>
</a>
</span>
</div>
这两种解决方案的工作,但它的结果在顶部o上堆叠1的图标中当缩小到移动视图时,彼此相遇。 缩小视图时,是否可以让它们堆叠在2上? 谢谢! –
当然,您需要使用[媒体查询](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries),这样您可以将边距重置为“零”更窄的屏幕 –