Icons in CSS are overlapping to create a stacked effect

Currently in the process of designing some stack icons, I've come across several discussions that suggest the following approach -

 i {
        position: relative;
    }
    
    i:before {
        content: "\f099";
        position: absolute; 
        font-size: 1.5em;   
    }
    
    i:after {
        content: "\f096";
        position: absolute; 
        font-size: 2.1em;
        left: 0;    
    }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa"></i>

The issue arises when multiple icons are involved,

<i class="fa"></i>
<i class="fa"></i>

In this case, both icons end up stacking on top of each other.

A different solution to this problem is as follows:

i {
            position: relative;
        }
        
        i:before {
            content: "\f099";
            font-size: 1.5em;   
        }
        
        i:after {
            content: "\f096";
            position: absolute; 
            font-size: 2.1em;
            left: 0;    
        }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa"></i>

Upon removing position: absolute from i:before and retaining it with position:absolute along with left:0 in i:after, the icons function as desired.

The concern at hand is whether this new solution is indeed correct and what led to including position:absolute in i:before in the previous solutions?

htmlcss

Answer №1

There is no need for the position:absolute in the i:before since the :before renders before the element and takes its position.

By adding the position:absolute to i:before, the width and height of the i tag become 0px because it treats the tag as if there is no element inside (a result of position:absolute).

Answer №2

Seems like it's designed for the hover effect.

i {
  position: relative;
}

i:before {
  content: "\f099";
  position: absolute;
  font-size: 1.5em;
}

i:after {
  content: "\f096";
  position: absolute;
  font-size: 2.1em;
  left: 0;
}

i.hideThis {
  color: orange;
  opacity: 0;
}

.foo i {
  transition: 0.3s ease-in-out;
}

.foo:hover i.hoverThis {
  opacity: 0;
}

.foo:hover i.hideThis {
  opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="foo">
  <i class="fa hideThis"></i><i class="fa hoverThis"></i>
</div>

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

Modify the hover dimensions within the CSS of a Bootstrap framework

I am trying to customize the hover effect size on my navigation bar in Bootstrap 4. I want to reduce the background size of the menu links when hovered over. I attempted a method from this source: How do i change the width of the hover in bs4 , but it did ...

htmlcsstwitter-bootstrapbootstrap-4

How can I add 0-5 images to a column without causing any distortion in the row?

I'm having trouble adding a series of images to rows in my Bootstrap 4 project. The source assets are large by default and I'm struggling with scaling them properly without affecting other columns. Here's a visual representation of what I cu ...

cssruby-on-railstwitter-bootstraperbtwitter-bootstrap-4

What is the best way to create a responsive div containing multiple images?

I am working on a slider and my approach is to create a div and insert 4 images inside it. The images will be stacked one above the other using position: absolute, with a width of 1013px, max-width of 100%, and height set to auto for responsiveness. The is ...

javascripthtmlcss

What is the process for adjusting the border color of my button?

Is there a way to change the blue outline color to #D5A021 instead of blue when the button is clicked by the user? I believe it might be related to the btn-primary class HTML <a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Fin ...

htmlcssbootstrap-4

Triangles made from CSS spanning the entire width of the browser

Picture a scenario where multiple triangles are displayed across the width of a web browser: section { position: relative; } section>.triangle { position: absolute; left: 0; top: 0; border-left: 20px solid transparent; border-right: 20px ...

htmlcss

Pictures failing to appear on specific web browsers

Just finished creating my first WordPress theme, and it's working perfectly in Firefox. However, after testing, I noticed that the images on one particular page are not displaying in Safari and Chrome. Does anyone have any insight as to why this may ...

htmlwordpressxhtmlimagexhtml-1.0-strict

Creating a background that adjusts based on the aspect ratio of an element using only CSS

In a div element, the size, which encompasses both width and height, is determined by its content. Since the content is loaded dynamically, there are instances where the width of the div is greater than its height, and vice versa. Is it feasible to assign ...

htmlcss

Understanding the dissimilarities between the input:disabled and input[disabled] CSS selectors

Is there a distinction between using the :disabled CSS pseudo-class selector and the [disabled] CSS attribute selector when applying styles to a disabled HTML input element, or are they essentially identical? Perhaps in terms of browser support or other ...

htmlcss

Converting a dropdown list (select) into a textbox with pure javascript or jQuery: A step-by-step guide

In my ASP.Net page, I have implemented a feature that populates textboxes and dropdowns upon page load. Depending on the selected values of the dropdowns, certain events are triggered to show/hide other elements on the page. While I want to maintain this ...

jqueryasp.nethtmldrop-down-menutextbox

Create a replication of this in VB.NET using an ASPX Repeater to iterate over the specified content

Need help with repeating the following code in vb.net/asp.net: <ul id="prod_nav" class="clearfix"> <li class="top"><a href="05-Pink-02-Category-List.html" class="top_link"><span class="down">Body and Trim</span></a&g ...

asp.netcssvb.netasprepeater

Refining Content without the Need for a Submit Button in Django

To filter objects, I currently have to choose an option from the dropdown box and then click the submit button. However, I want the filtering process to happen immediately after selecting an alternative from the dropdown menu, without having to click the ...

pythonhtmldjango

Divide the table columns and place them into their respective individual tables

I am faced with a task to split a table with multiple columns into separate tables for each column. My approach is as follows: Identify th in each column. Use the th tag as an indicator for a new column. Locate tr td in each column. Create a new table ...

jqueryhtml

Reducing the Size with Jquery Tools

I am looking to create a unique screen using JQuery Tools (or just JQuery) and HTML5. The screen will feature a main panel with rounded square buttons. When a user clicks on one of these buttons, the panel will shrink and move to the left side while reveal ...

jqueryhtmljquery-tools

What is the best way to display elements in separate rows within an HTML table?

Hi, I'm currently retrieving data from an Excel file but it is all showing up in one row. Below is the HTML code snippet: {% block body %} # Using Bootstrap table class <table class="table table-bordered"> <thead> ...

htmlcsshtml-tablebootstrap-4

Moving files by dragging and dropping rather than deleting them

I have successfully implemented a feature using JavaScript to drag and drop multiple files, followed by displaying those images. The code below is fully functional without any errors. Need help with: I am now looking to add the ability to remove these ima ...

javascripthtmljquerydrag-and-drop

An error occured upon loading FullCalendar: Uncaught TypeError - Unable to read property 'push' as it is undefined

First of all, thank you for your assistance. I've been trying to load FullCalendar (https://fullcalendar.io/) on my development environments but it doesn't seem to be working. When I check the console in Chrome, it shows me the following error m ...

javascriptjqueryhtmlfullcalendar

Problem encountered when a relative path in an HTML file within a subdirectory attempts to access libraries located in separate directories

I'm currently facing an issue with defining the path for libraries and models used in an HTML file that employs WebGL. The specific HTML file can be accessed here, serving as a sample code snippet from a WebGL2 book. Locally, on my computer, the HTML ...

htmlpath

Restrict certain sections of the website to authorized users only

In my game project, players are presented with two options: to play the game itself or to view global and local highscores. I have implemented a signup and login system where upon successful login, users can choose among playing the game, checking highscor ...

javascripthtmlnode.jsexpressserver

Hover effect with diagonal movement

I'm attempting to recreate the unique diagonal arrow animation featured on this website: For reference, here is a small boilerplate: https://jsfiddle.net/randal923/x0ywchq5/8/ Any advice on the best way to position and animate the arrow would be gre ...

css

Customizing Material-UI Grid: Is it possible to assign a background color solely to the cells, without affecting the surrounding empty spaces?

I've been experimenting with designing a grid system that incorporates a gradient background color. The issue I'm facing is that the background color extends to the empty spaces between the grid cells as well. Is there a way to scope the gradient ...

cssmaterial-ui