無法創建字體真棒圖標之間的空間

我想在我的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>

來源

2017-02-12 Red Hendery

只需使用margin這樣的：

.fa-stack { 
    margin-right: 10px; <-- change accordingly 
}

的最後一個div創建一個自定義的類名，並添加margin-right: 0;，以防止不必要的該div後的餘量。

來源

2017-02-12 10:39:20

您可以簡單地添加緣至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>

來源

2017-02-12 10:41:14

這兩種解決方案的工作，但它的結果在頂部o上堆疊1的圖標中當縮小到移動視圖時，彼此相遇。縮小視圖時，是否可以讓它們堆疊在2上？謝謝！ –

當然，您需要使用[媒體查詢]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries），這樣您可以將邊距重置爲「零」更窄的屏幕 –

codepen

.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>

來源

2017-02-12 10:52:35

無法創建字體真棒圖標之間的空間

回答

相關問題