Switching FontAwesome Stacks on Hover

I'm facing a challenge with creating a quick animation that replaces an entire span on hover. How can I successfully approach replacing a span on hover?

<h1>I am looking to have this element replaced...</h1>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
<h1>with this one</h1>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
<h1>when hovered over</h1>

Check out the sample CodePen for reference.

htmlcssfont-awesome

Answer №1

To achieve the desired result, you can modify the CSS properties for the Twitter icon on hover using :before.

span.fa-stack:hover i.fa-twitter:before{content:"\f024"; color:#fff}

span.fa-stack:hover i.fa-square-o:before{content:"\f111"}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1>I need this changed...</h1>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

Answer №2

To achieve this effect using CSS, you can utilize the combination of the :hover and :first-child/:last-child selectors.

.fa-stack.fa-lg:hover :first-child:before {
  content: "\f111";
}

.fa-stack.fa-lg:hover :last-child:before {
  content: "\f024";
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

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

If element Div is labeled as either A, B, or C, it should smoothly fade out and then fade in as Div

I'm currently working on enhancing the navigation of my portfolio website and I’m facing a challenge in adding additional properties to my toggle() function. This basically involves creating a filter system with four possible options, which are: ...

jqueryhtmlcss

The expression '<xsl:value-of select="document(content)//title"/>' results in a null node response

Can someone assist me in retrieving the title of a basic HTML document in order to create a sitemap? I have been receiving an empty value every time I try. Upon inspecting the issue, it appears that the document(content) is returning document nodes. It s ...

htmlxslt

How can I maintain the state of an HTML checkbox in Django even after reloading the page?

In the following sample code, I am looking to maintain the checkbox as checked even after a page reload when the submit button has been pressed. <td><input type="checkbox" value="{{ item }}" name="selectedcheckbox"/ ...

pythonhtmldjangocheckbox

Can I link the accordion title to a different webpage?

Is it possible to turn the title of an accordion into a button without it looking like a button? Here is an image of the accordion title and some accompanying data. I want to be able to click on the text in the title to navigate to another page. I am worki ...

javascriptcsshtmlcordova

An issue arises with an unterminated string literal whenever I attempt to click on an anchor

Upon clicking a tag, the following error occurs unterminated string literal <a onclick="ga('send', 'event', 'CloudStore', 'Click', 'Cloud is here - Banner’);" href="about.php" class="red-text block"> ...

htmlonclickanchor

What could be causing the embedded dropdown to automatically select the initial option every time?

I am encountering an issue with a page that includes an html table rendered using node with express and ejs. The table contains a select dropdown in one of the cells, and it populates correctly with the right values. However, regardless of which option I ...

javascriptjqueryhtmlmysqlnode.js

Using PHP to swap out HTML elements

I need a solution to display text with HTML tags as plain text, without the browser interpreting them. I want the output to be similar to how HTML code viewers render it. For example: replacing <div> with <span><</span><span>d&l ...

phphtmltags

Struggling with smoothly transitioning an image into view using CSS and JavaScript

I'm currently experimenting with creating a cool effect on my website where an image fades in and moves up as the user scrolls it into view. I've included the code I have so far below, but unfortunately, I keep getting a 404 error when trying to ...

javascripthtmlcssgetboundingclientrect

Adjusting font sizes for both multiline text within a <p> element and labels based on the number of lines

Whenever I have multiline paragraphs or labels, the font size seems to adjust depending on the number of lines. All I want is to keep the font size consistent regardless of the lines. The labels all have the same CSS styling and inheritance. Here is a vis ...

htmlcssasp.net

What is the process for layering one image on top of another in HTML?

Don't miss checking out the amazing website wplayout.com. On the homepage, there is a stunning gallery that I want to enhance by adding a "premium" tag image on top of each picture. Currently, the premium image is displayed in the top right corner of ...

htmlcss

What is the method to restrict the selection of only one option for specific values in a multiple-selection dropdown menu?

Is there a way to create a dropdown menu with the following functionalities: I want to allow multiple selections for options A, B, and C, but disable multiple selection if option D is selected. Any tips on how to achieve this? Thank you. <label>Ch ...

javascripthtml

Eliminate the hovering effect from images that are hyperlinked

I am feeling incredibly desperate as I have spent hours searching the internet for a solution with no success. When it comes to text links, I have included the following CSS code: a:hover img { border-bottom: none !important; } However, this code is als ...

javascriptjqueryhtmlcss

"Unexpected behavior: PHP+JS getElementById() function is returning an integer value instead of a

EDIT: Apologies for the PHP section not displaying correctly. I am attempting to extract a decimal value from PHP/HTML in JavaScript using getElementByID().value. However, despite the PHP value being decimal, it is represented as an integer in JavaScript ...

javascriptphphtmlfloating-pointgetelementbyid

What is the best approach to extracting tightly-coupled code and converting it into an external library?

I have a question regarding paradigms that I would like to address, and if this is not the appropriate platform, please guide me to the right place. Your recommendations are most welcome :) Currently, I am tasked with extracting a significant piece of fun ...

javascripthtmlparadigms

How to Retrieve Multiple Values by Passing Arguments using AJAX, PHP, and MYSQL

I am currently working on developing an ajax Based Search feature. This is just a demo showing how it will function. However, I have encountered an issue with returning the results. I want to display the result twice, but it is only appearing once. Below i ...

phpmysqlhtmlajaxjquery

When I increase the length of my website's header and footer, I notice that the data in the footer is only displayed on the homepage and not on the other

I am facing an issue with extending my header and footer in Django. The problem is that when I pass data to the footer, it only appears on the home page and not on other pages. I understand that I need to pass the data to every page individually, but I am ...

pythonhtmldjangodjango-templatesjinja2

Tips for utilizing Jinja2 to produce a custom HTML email design?

I am trying to dynamically display data in an HTML email template using Jinja2 and Python. I am fairly new to both languages, but here is what I have accomplished so far: Started with my boilerplate code dynamic /dynamic.html /script.py I have cr ...

pythonhtmljinja2html-emailemail-templates

What is the process of linking a PHP file to an HTML form?

Having trouble sending emails with form data since the mailto function isn't working properly. For some reason, the php file is not connecting to the html form. When I try running index.html locally and hit submit, the browser displays php code inste ...

phphtmlformsemailaction

What Could Be Causing My Webfonts to Be Inaccessible on Windows Devices and iPhones?

I recently created a simple holding page on www.tomrankinmusic.com The Webfonts I embedded in the page display correctly in the latest versions of Firefox, Safari, and Chrome on Mac OSX Lion 10.7.4 but do not show up in Chrome and IE6 on Windows XP Pro, d ...

htmlcssfontswebfonts

Retrieve the XPath for the elements that combine to create a specific string within an HTML document

Issue: Searching for the xpath of node(s) that contribute to a text string in an HTML document. Using Python language (lxml to parse the document) To demonstrate, let's examine the following document: <HTML> <HEAD> <TITLE>samp ...

pythonhtmlregexxmlxpath