How can I position a Font Awesome icon in the center of an image with Bootstrap 3?

I'm attempting to center a font-awesome icon on top of an image within bootstrap 3.

Below is the image code enclosed 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 managed to achieve this using ::before on the div element, but the issue is that it lacks responsiveness.

.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's how it appears in desktop display size:

https://i.sstatic.net/5gJj1.png

However, when transitioning to mobile or tablet view sizes, it becomes distorted due to margins, as shown below:

https://i.sstatic.net/3Erpi.png

Is there a way to resolve this without relying on specific screen sizes? Whether through css, javascript, or jquery, any solution would be appreciated.

I hope this isn't a duplicate question; I couldn't find a suitable answer elsewhere...

Thank you in advance.

javascriptjquerycsstwitter-bootstrapfont-awesome

Answer №1

This question frequently comes up regarding overlays. One common solution is to utilize absolute positioning along with translate within a parent element that has relative positioning.

  • Ensure the parent element has position: relative; to prevent the overlay from appearing in an unintended location. This containment method is crucial.
  • Assign position: absolute; to the overlay element and set 50% for both left and top. This positions the top left corner of the overlay at the center of the parent element.
  • Utilize 
    transform: translate( -50%, -50% );
    to move the overlay upwards and to the left by 50% of its width and height, ensuring the center of the overlay aligns with the center of the parent element.

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

Keep in mind that the image wrapped by the anchor tag may leave some white space due to text descenders, preventing it from being perfectly vertically centered. To address this, you can set the image to display: block;.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for an effective method to implement CSS styling within a list cell in JavaFX?

As a beginner in JavaFX with limited knowledge of CSS, I struggled to conduct proper research and provide relevant information here. I apologize for any confusion or duplication. I am seeking a solution to apply CSS to JavaFX controls, specifically in a Li ...

javacssjavafx

Error encountered while handling document events during server-side rendering in ReactJS

I am currently developing a React.js application that requires keyboard navigation for a horizontal scrolling carousel of items. In the existing version, only the left and right arrows are used for navigation, with Enter being used to make selections. I ha ...

javascriptreactjsexpress

Guide on looping through an array of objects and displaying the key and value pairs using pug

I'm having trouble displaying errors from an incomplete form. In my array of objects, I want to iterate through and retrieve the errors, but it seems the list is currently empty. Upon debugging, it appears that the errors variable contains [ { e ...

javascriptarraysexpressiterationpug

What is the best way to extract information from an API using javascript?

I've been working on a weather app project, and recently made changes to the code so that the longitude and latitude values are based on the user's geolocation. However, I've encountered an issue where the button is no longer functioning. Up ...

javascriptjqueryjsonajaxapi

Swap out designated text with jQuery or JavaScript code

I am currently working on developing a customized WYSIWYG text editor within the browser that comes with a limited set of features. The main functionality I am focusing on involves wrapping specific text in span tags. While there are many resources availa ...

javascriptjquerywysiwyg

Converting a string representing time to a date object in Angular

Converting a string representation of time to a Date object var timeString = "09:56 AM"; this.audit_time = new Date(timeString); // Error: Invalid date I'm facing an issue with this conversion. Any suggestions on how to correct it? Please help me s ...

javascriptangularjsangulardatepicker

bring in all the files located within the Directory

Is there a way to import all CSS files from a specific folder without having to import each file individually? Looking to import assets/css/* ? <link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/> <title&g ...

javascriptphphtmlcsshead

Displaying an error message in the designated errors div is necessary when the regular expression does not produce a match

Is there a way to display an error message in the errors div when the jQuery match function returns false? <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="form.css"> ...

javascriptjqueryhtmlregex

An issue occurred during the insert operation in Node.JS with PostgreSQL, specifically related to the sequence.c

Currently, I am working on implementing a user signup feature in an application using Node.JS, PostgreSQL for the database, and 'pg' for ORM. The user is required to input their email, password, phone number, country, and the data will be saved ...

javascriptnode.jspostgresqlpg

Is there a way to navigate through div text within a stationary container?

My current challenge involves a container that contains an overflow of text, but I desire for the container to remain fixed. The dilemma arises when the text spills out from both the top and bottom edges of the container. Instead of using scroll bars withi ...

jquerycssparallax

The hover functionality fails to activate when a z-index is applied

My issue revolves around 2 divs: one containing a link and the other a box-shaped container. The link is set with position:fixed; causing it to fly over the container div. To resolve this, I attempted to assign a negative z-index value to the link, but unf ...

javascriptjqueryhtmlcss

How can I disable Yii CGridView filter on change event?

Is there a way to modify the behavior of CGridView so that the filters only apply when the user hits the "enter" key, instead of changing the results every time a filter is updated? My goal is to be able to input values in multiple filters and then hit en ...

phpjqueryyii

Is there a way to implement a directive wrapper for ng-grid that allows the grid options to be specified using a directive attribute?

My goal is to create a reusable directive wrapper for ng-grid, where I can dynamically apply the ng-grid options through the use of an attribute. Below is the basic structure of the code that almost achieves what I am looking for: angular.module('my ...

javascriptangularjsangularjs-directive

Utilizing the jQuery Selector for Headers

I am currently working on grasping the concept of using the Jquery selector. https://learn.jquery.com/using-jquery-core/selecting-elements/ In my project, I have a table and I am trying to create an input field within a modal. My main challenge lies in c ...

javascriptjquery

JavaScript Time and Date Formatting

I'm pretty new to programming, especially in Javascript. Can someone help me simplify my code? I'm trying to create a dropdown for months and an input field for the year. Is there a more efficient way to make the month select box? Also, how can ...

javascriptjqueryhtmldatedatetime

Ways to trigger a JavaScript notification

I consider myself experienced in scripting, but I can't seem to figure this out. I'm trying to trigger a function on a button click event, so I decided to start by testing the buttonclick event with a basic window.alert. I wrote the following htm ...

javascriptjqueryhtmlalert

What steps should I take to ensure my three.js project is compatible with iPhone testing?

I recently developed a new AR project that allows users to interact with AR content through their phone camera on a website. However, I am facing an issue where I cannot easily test my website on an iPhone whenever I make changes to the code. Currently, ...

javascripthtmlthree.js

A guide to effortlessly converting Any[] to CustomType for seamless IntelliSense access to Properties within Angular/Typescript

Our Angular service interacts with the backend to retrieve data and display it on the UI. export interface UserDataResponse { id: number; userName: string; } AngularService_Method1() { return this.http.get<UserDataResponse[]>(this.appUrl + "/Ap ...

javascriptangulartypescript

"Using jQuery to detect when an input has been modified to be either zero

I utilized jQuery's .on('change') event to identify any changes in the input field value. Nonetheless, when the user enters 0 in an initially empty input field, the field gets cleared and the value is considered unchanged, leading to the fol ...

jqueryevents

Renaming errors within a project with a complex nested structure using npm

I am encountering an issue in my NodeJS project which consists of nested subprojects with their own package.json files. Whenever I make changes to dependencies in the subprojects, I encounter errors similar to the one below: npm ERR! code ENOENT npm ERR! ...

javascriptnode.jsnpm