Ich versuche, etwas Platz zwischen meinem 4 fa-icons
zu bekommen, um sie mehr über die Seite zu verbreiten. Ich möchte, dass sie ungefähr 75% der Seite aufnehmen. Die HTML
und begleitende CSS
ist unten dargestellt:Ich kann keinen Platz zwischen Font erstellen Awesome Icons
.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>
Beide Lösungen arbeiten, aber es führt in den Ikonen, die 1 auf die Oberseite stapeln o f gegenseitig geschrumpft zur mobilen Ansicht. Ist es möglich, sie auf Stapel 2 auf 2 zu bringen, wenn die Ansicht verkleinert wird? Danke! –
Ja, natürlich müssen Sie [media queries] verwenden (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries), so können Sie die Ränder auf "Null" zurücksetzen schmalere Bildschirme –