Use a Font Awesome Icon in case the background image is unavailable

I need a straightforward way to display a Font Awesome icon in place of an unavailable image. Here is the code I am currently using:

<div class="notAvailableIcon" style="background-image:NotAvailable.jpg">
</div>

Here is the CSS:

.notAvailableIcon:before {
   font-family: FontAwesome;
   content: "\f000";
 }

While this setup works when the image is not available, the problem arises when the image is present - the icon remains visible on top of the image. Is there a CSS solution to hide the icon if a background-image is set, or perhaps a method for stacking background-images so that the icon is behind the image when it's available?

htmlcssfont-awesome

Answer №1

There is a potential solution that may work for your situation, which involves positioning the pseudo-element absolutely and applying a negative z-index value:

View Example Here (Try toggling the background within the CSS panel)

.notAvailableIcon { position: relative; min-height: 1.2em; }

.notAvailableIcon:before {
    content: "\f000";
    font-family: FontAwesome;
    position: absolute; z-index: -1;
 }

Important Note: Since the pseudo-element is taken out of the normal flow, it's advisable to set a minimum height for the container to ensure proper spacing: min-height: 1.2em;

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

Filling a blank table using jQuery

I am attempting to search for an item by sending a GET request to my service and then populating my table with the response, but I am struggling to achieve this with my current code. $(function(){ var $searchInput = $("#search"); $("#searchOptions").c ...

jqueryhtmlhtml-table

A step-by-step guide on ensuring mandatory completion of all input fields prior to form submission

I'm new to JavaScript and I need some help. Currently, I am trying to implement input field validation using pure JavaScript for a form. However, I am facing an issue where the "Required" message only appears next to the last name input. What I want ...

javascripthtmlformsdom-events

Execute JavaScript code inside lightSlider

I'm attempting to incorporate a jQuery UI date picker into a lightSlider item. However, I'm struggling to understand how to make JavaScript execute within the slider based on its content. The date picker is just one example of what I'm tryin ...

javascriptjqueryhtmlwebslider

Center align an item using flex and absolute positioning

I am facing an issue with my carousel where I am trying to display text at the center of it both horizontally and vertically. I attempted to use the flex display property but did not achieve the desired outcome. .heroText { display: flex; position: ...

htmlcss

Adding a class to the wrapper of an input checkbox element and placing a class on the label/input field in CakePHP 3

To achieve a bootstrap checkbox layout in CakePHP 3 form helper, I want to include the custom checkbox class alongside the default "input checkbox" div and apply a class to the label as well. ...

htmlbootstrap-4cakephp-3.0

Retrieving the value of the name attribute from a div using the $_POST method

Seeking to retrieve the value of $_POST["number"] from the <div name="number" class="total"></div> HTML element with the total class attached. var count = 0; $('button').click(function(){ count++; count > 3 || $('.to ...

phpjqueryhtml

After calling AJAX, jQuery fails to execute

Encountering an issue with JQuery on a dynamic page. I have a select input: <select id="select"> <option value="1">1</option> <option value="2">2</option> </select> and a text input: <input id="input" type= ...

jqueryhtmlajax

Resetting text in an input field using CSS

Here is the fiddle link for reference: http://jsfiddle.net/a765q/1/. I noticed that when I click the reset button, the text color changes to grey. Any ideas on how to fix this? ...

javascripthtmlcss

Problem with Bootstrap container-fluid overlapping with floated element

I am struggling with the layout of my card body, which includes a floating logo and rows enclosed in a container-fluid. While everything looks great in Chrome, I am facing alignment issues in Edge and Firefox. I have considered using absolute positioning ...

cssfirefoxbootstrap-4microsoft-edge

Preserve HTML client control values during page reloads

Is there a more efficient way to retain client-side HTML controls on postback? I've attempted using enableviewstate="true", but it didn't work. My current workaround involves creating a server-side function that resets all posted values using Cli ...

c#asp.nethtmlpostbackviewstate

Customizing the select form arrow in Bootstrap 4: A step-by-step guide

I'm currently working on a form using Bootstrap 4 and I want to customize the style of the arrow select element. I'd like it to look like the second version shown below: https://i.sstatic.net/oUBBI.png I've tried various methods (reference ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

When the browser back button is clicked, conceal the current div and reveal the previously hidden div

I'm faced with a situation where my website consists of multiple pages which I've achieved by displaying and hiding divs within a single html file. The issue I'm encountering is that the browser's back and forward buttons aren't fu ...

javascriptjqueryhtmlcss

Achieving equal alignment of items with flexbox

As someone who is just starting to learn about HTML and CSS, I have been working on creating toggle buttons that I want to align dynamically in the center of the screen. I recently discovered flexbox which has made this process easier for me. However, one ...

htmlcssflexbox

Using gradients in the app bar with ReactJS and Material UI is not currently supported

Recently, I decided to create my own custom appbar for a personal project and opted to use the Erica One font. As it is still in its initial stages, there isn't much code written yet. However, I've encountered two issues related to linear and ra ...

cssreactjsmaterial-ui

The live chat section on YouTube is not appearing correctly within the iframe

I am having trouble integrating a chat box into my website. The YouTube live chat box is not displaying correctly. Here is the link to my jsfiddle: https://jsfiddle.net/webregister/wnbz0edo/15/ If you notice that the chat is not working, please obtain a ...

javascriptcssyoutubeyoutube-livestreaming-api

Adjusting CSS using JQuery based on scroll position

I am attempting to dynamically change a CSS style depending on the viewer's position on the page. Despite researching numerous similar threads online, I have not been able to get this code to work as intended. Any assistance would be greatly appreciat ...

jqueryhtmlcss

Ways to eliminate class from HTML code

Trying to detect if a navigational element has a specific class upon click. If it has the class, remove it; if not, add it. The goal is to display an active state on the dropdown button while the dropdown is open. The active state should be removed when a ...

javascripthtmljquerycss

Ensuring the footer sticks to the bottom when the body height is set to 100%

I prefer to design my styles based on the height of the window, which I achieve by setting the html and body elements to a height of 100%. html, body{ min-height: 100%; height: 100%; } From there, I can customize the heights of other elements accor ...

javascripthtmlcss

Why isn't the program recording user input in the console when the form is submitted?

Can someone please advise me on how to get the program to print the user's input values to the console when they click the "Sign up now" button? ...

javascriptjqueryhtmlcssweb