How can I utilize a Font Awesome 5 icon as the background image for a card using Bootstrap-4?
After trying numerous solutions found online, I am still unable to get it to work.
My environment consists of Angular2 (v8) in conjunction with Bootstrap 4.
This snippet of code successfully achieved the desired outcome for me. I've streamlined my approach while still incorporating a font-awesome icon as a background and allowing text to be overlaid:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-6 d-flex">
<div class="class-box">
<div class="bg-primary">
<i class="fa fa-question big-centered-icon"></i>
</div>
<div class="box-content">
<h3 class="title-bg text-outline"><Strong>TITLE</Strong></h3>
<h4 class="title-bg text-outline">Subtitle</h4>
<h4 class="title-bg text-outline"><Strong> Subtitle</Strong></h4>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 d-flex">
<div class="class-box">
<div class="bg-primary">
<i class="fa fa-question big-centered-icon"></i>
</div>
<div class="box-content">
<h3 class="title-bg text-outline"><Strong>HELLO</Strong></h3>
<h3 class="title-bg text-outline"><Strong> 2nd HELLO</Strong></h3>
<h3 class="title-bg text-outline"><Strong> 3rd HELLO</Strong></h3>
</div>
</div>
</div>
</div>
</div>
CSS:
.big-centered-icon {
font-size: 144px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex; /* add */
justify-content: center; /* add to align horizontal */
align-items: center; /* add to align vertical */
}
.class-box{ text-align:center;position:relative;margin:8px;width: 100%;padding-bottom: 75%}
div.class-box > div { position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;padding-top:15%}
.class-box .title-bg{font-size:24px;color:#000;}
I've been working on a simple comment script that allows users to input their name and message, click submit, and have their comment displayed on the page like YouTube. My plan was to use a prebuilt HTML div and clone it for each new comment, adjustin ...
Currently, I have a container with a background image that turns semi-transparent on hover. Below is the simplified version of my HTML: <div class="container"> <div class="overlay"></div> <img src="hi.jpg"> </div> This ...
After implementing the code for bootstrap textbox and textarea, I encountered an issue when using the reset button. When entering an invalid shop name followed by a valid address and clicking on the Reset button, it resets the form. However, if I then only ...
While trying to position my hovering image next to my mouse pointer, I want it to be exactly on the mouse cursor instead of slightly separated from it. You can see an example in this VIDEO EXAMPLE. Currently, the image is displayed next to the mouse pointe ...
I am currently working on an Angular 2 application and I am fairly new to Angular. I am facing an issue where my CSS does not seem to be applying properly. There are three key files involved: landing.component.html landing.component.scss landing.compone ...
I recently watched a freeCodeCamp video tutorial on web development which can be found here. Despite following the tutorial step by step, I encountered the following error message while running the webpack script: PS C:\Admin-Dashboard> npx webpac ...
For proper alignment, the "Login" button needs to be pushed to the right of the navbar alongside other buttons. To see the issue and the code, check out this JSFiddle example: https://jsfiddle.net/sterlingmd17/tk17zjfq/1/ <nav class="navbar navbar ...
Looking to incorporate a conditional style into my Component. Here is my component: <site-pricing color="primary" currency="$" price="25" to="/purchase" > <template v-slot:title>Complete</templat ...
I need help figuring out the most efficient method for creating a page header that showcases an image while keeping the text visible for search engines and in case the image fails to load. According to Google, it is recommended to use a <div> for th ...
Below is a snippet of code that creates a list of links: <h3>Hours</h3> <div class="hours-display pb-2"> <div class="mb-0"><span class="mr-2"><strong>Mon</strong></span><span class="mr-1">9:30</sp ...
I have been trying to resolve an issue with PNG files and transparency in IE browsers on my website. I have made progress, but there seems to be a problem specifically with IE6. To display transparent PNG images correctly on my site in IE browsers, I am u ...
Recently, I've been delving into the world of Flex to experiment with some unique layouts. However, I encountered an issue where my divs were not recognizing widths as expected. I attempted to set the first div of each row to 5% width so they would ...
While developing a web app, I encountered an issue with the responsive (parallax) full screen background. On mobile devices, the background does not extend below the toolbar, causing a jumpy effect when scrolling up and down in Firefox. I have tried differ ...
I have an object with two properties: person and vehicle. Both properties consist of arrays of data. I have separate column headings for the person and vehicle properties and display the data in tabular form. However, the column headings for both propertie ...
My bootstrap Carousel was working perfectly fine until I added a script to modify the navigation bars. The original script for the Carousel looked like this: <script> !function ($) { $(function() { $('#myCar ...
I am currently working on a page that includes a div with a Facebook recommend button. In order to style the Facebook code, I enclosed it with this formatting: <div style="align:center"> <div id="fb-root"></div> <script src=" ...
Within my Angular application, I have defined an object structure like this: export class Article { id: number; author: number; title: string; content: string; date: Moment; readingTime: number; draft: boolean; constructor(obj: Partial< ...
As a provider of a service that helps users find the location of pictures, I face a challenge due to the fact that the pictures are stored on another internal site. Some users may not have access to this site as my service offers additional information. Th ...
html <label for="date">{{ "date" | translate }}</label> <input type="date" class="form-control checking-field" id="date"> Is there a way to display the date in the format ('dd/mm/yyyy') in this HTML code? ...
Seeking help to create an FAQ page using HTML, CSS, and jQuery. My goal is to rotate an arrow when a question is opened and revert it back when another question is clicked. I've successfully achieved this with <p> tags but facing issues with the ...