ブートストラップ3のイメージにフォントの素晴らしいアイコンを配置するにはどうすればよいですか？

Question

イメージの上にfont-awesomeアイコンをbootstrap 3に配置しようとしています。

<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を使用しますが、ここでの問題は、それはデフォルトでは反応しないということである。ここでは

はdivの中に含まれる画像コードです。ここで

.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にある場合は、私には関係ありません。これが重複していないが、ここで任意の適切な解決策を見つけることができませんでした

希望...事前に

感謝。

Answer 1

これは一般的なオーバーレイの問題です。典型的な答えは、相対的な位置にある親の内部で平行移動を使用する絶対的な位置決めです。

• 親が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;に設定して削除することができます。