0
536
ViewsHow to center a font awesome icon over an image in bootstrap 3?
I am trying to center a font-awesome icon over an image in bootstrap 3.
Here is the image code contained in a 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>
I could do that using ::before on div element but the problem here is that it is not responsive by default.
.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;
}
Here is how it looks like in desktop display size:
When I turn it into mobile or tablet view size it just get distorted due to margin etc just like below:
Is there any way how to fix it without knowing the screen size ?
It does not matter for me if the solution is in css or javascript or jquery.
Hope this is not duplicate but did not find any proper solution here...
Thanks in advance.
1 answers
Answer question0
This is a common overlay question. The typical answer is use absolute positioning with translate inside a relative positioned parent.
- Make sure the parent has
position: relative;so the absolute positioned overlay element doesn't end up somewhere where you don't want it. We're containing the overlay by doing this. - Apply
position: absolute;to the overlay element. Apply50%toleftandtop. This gets the top left corner of the overlay element to the center of the parent. - Use
transform: translate( -50%, -50% );to move the overlay up and to the left 50% of it's width and height. Now the center of the overlay is at the center of the parent.
@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>Note that the image that the anchor is wrapping will create a small amount of white space that is left for a descender in text so it will technically not be 100% vertically centered. If this is an issue you can remove this by setting the image to display: block;.