如何在引導3中的圖像上放置字體真棒圖標？

我想將font-awesome圖標放在bootstrap 3的圖像上。如何在引導3中的圖像上放置字體真棒圖標？

這裏是包含在一個div形象代碼：

<div id="quickVideo"> 
    <a data-fancybox href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo"> 
     <img src="~/Images/..." class="img-responsive"> 
    </a> 
</div>

我能做到這一點的div元素上使用::before但這裏的問題是，它沒有響應默認。

.adminDemoVideo::before { 
    font-family: 'FontAwesome'; 
    content: '\f04b'; 
    margin-top: 1.35em; 
    margin-left: 2.8em; 
    color: white; 
    z-index: 1000; 
    font-size: 50px !important; 
    position: absolute; 
    padding-bottom: 3px; 
    padding-top: 3px; 
    padding-left: 25px; 
    padding-right: 15px; 
    background-color: rgba(23, 35, 34, 0.75); 
    border-radius: 5px 5px 5px 5px; 
}

這裏是如何看起來像在臺式機顯示器尺寸：

當我把它變成手機或平板電腦視圖大小，它只是得到扭曲由於利潤率等，就像下面：

有什麼辦法如何解決它不知道屏幕尺寸？如果解決方案在css或javascript或jquery，對我而言無關緊要。

希望這不是重複的，但在這裏沒有找到任何妥善的解決辦法...

在此先感謝。

來源

2017-04-11 Rajmond Burgaj

如何使用保證金和填充的百分比？ – bhansa

您是否嘗試過使用'top'和'left'屬性？像'top：calc（50％ - width）'和'left：calc（50％ - width）'，其中width將是圖標的寬度。 – philr

我也用'calc'函數試過了。我設法修復它爲一個特定的顯示大小，但當它再次轉向桌面模式時，它變得扭曲。我嘗試了類似'left：calc（50％ - 10em）;'但沒有解決所有尺寸的問題，因爲當引導程序調整大小時會丟棄所有內容： –

這是一個常見的重疊問題。典型的答案是使用絕對定位，在相對位置的父代中進行翻譯。

請確保父母有position: relative;，這樣絕對定位疊加元素不會結束在您不想要的地方。我們通過這樣做來覆蓋疊加層。
將position: absolute;應用於疊加元素。將50%應用於left和top。這會將疊加層元素的左上角置於父層的中心。
使用transform: translate(-50%, -50%);將覆蓋層向上移動到其左側50％的寬度和高度。現在疊加層的中心位於父層的中心。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 
 

 
.adminDemoVideo { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.adminDemoVideo::before { 
 
    content: '\f04b'; 
 
    z-index: 5; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    padding: 3px 15px 3px 25px; 
 
    color: white; 
 
    font-family: 'FontAwesome'; 
 
    font-size: 50px !important; 
 
    background-color: rgba(23, 35, 34, 0.75); 
 
    border-radius: 5px 5px 5px 5px; 
 
}

<a href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo"> 
 
    <img src="http://placehold.it/1200x800/fc0" class="img-responsive"> 
 
</a>

注意的是，錨被包裹將創建被放置在文本下降部的白色空間少量因此它將技術上不可能100％的圖像垂直居中。如果這是一個問題，您可以通過將圖像設置爲display: block;來消除此問題。

來源

2017-04-11 18:18:28 hungerstar

我想你讓我以正確的方式，讓我試試，如果它在我的情況下工作，這將是正確的標記答案:) –

如何在引導3中的圖像上放置字體真棒圖標？

回答

相關問題