What is the best way to smoothly switch from one Font Awesome icon to another?

I am working on an HTML button with the following code:

<button id="sidebar-toggle-button" class="btn btn-primary header-btn" type="button" data-bs-toggle="offcanvas"
      data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
      <div class="icons">
        <i id="sidebar-toggle-default" class="fa-solid fa-bars sidebar-toggle-icon-default"></i>
        <i id="sidebar-toggle-active" class="fa-solid fa-bars-staggered sidebar-toggle-icon-active"></i>
      </div>
    </button>

This button is part of a collapsible sidebar created using Bootstrap (known as an offcanvas). I want to create a hover effect where the 

"sidebar-toggle-default"
icon transitions to the 
"sidebar-toggle-active"
icon.

After researching, I found a discussion suggesting this can be achieved with CSS. However, the examples I found are too complex for my needs, and I am unable to replicate them successfully in my own code.

My goal is to create a simple animation where the default icon shows three bars stacked vertically, and the "active" icon displays the same bars with a slight offset in the middle one. When hovering over the icons, I want it to look like the middle bar is being pushed forward. Is there a straightforward way to achieve this effect?

htmlcssbootstrap-5font-awesome

Answer №1

Here's a simple trick you can use - just set the second icon with position: absolute:

.icons {
  position: relative;
  display: flex;
  i {
    transition: opacity .4s;
    &:last-child {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
    }
  }
}

.header-btn {
  &:hover {
    .icons {
      i {
        &:first-child {
          opacity: 0;
        }
        &:last-child {
          opacity: 1;
        }
      }
    }
  }
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62000d0d16111610031222574c514c50">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"/>

<button id="sidebar-toggle-button" class="btn btn-primary header-btn" type="button" data-bs-toggle="offcanvas"
  data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  <div class="icons">
    <i id="sidebar-toggle-default" class="fa-solid fa-bars sidebar-toggle-icon-default"></i>
    <i id="sidebar-toggle-active" class="fa-solid fa-bars-staggered sidebar-toggle-icon-active"></i>
  </div>
</button>

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

ways to undo modifications made to a value within an input field using jquery or javascript

$(document).ready(function () { //Highlight row when selected. $(function () { $('#Cases tr').click(function () { $('#Cases tr').removeClass('selectedRow'); $(this).addClass(&apos ...

javascriptjqueryhtml

What is the best way to retrieve the value of a custom attribute from a dropdown list using either JavaScript or jQuery?

I have a dropdown list on a web form and I need to have a 'hidden' variable for each item in the list that can be retrieved using the onchange event on the client side. To achieve this, after databinding the dropdownlist, I am setting a custom at ...

javascriptjqueryhtmlasp.net

What could be causing this issue with the jQuery CSS not functioning properly?

When I come across the following HTML snippet: <div id="map"> <div class="elem"> hey1 </div> <div class="elem"> hey2 </div> <div class="elem"> hey3 </div> </div> In JavaScript: va ...

jquerycss

Having trouble with PHP SQLite3 functioning on the web server, but it works fine

I am facing an issue where my scripts are not running online on the server, despite working fine on localhost with XAMPP for testing. I have a few PHP files and a database '*.db' that I can share if needed... The scripts in PHP and SQLite are qu ...

phphtmlsqlite

Should GIT be utilized for managing version control of HTML pages?

Currently, I am developing an application that automatically generates blog pages in HTML format using JSON files. In addition to this functionality, the app also needs to support versioning for each blog created. The process involves converting JSON dat ...

htmlnode.jsjsongit

Submitting a form via email without the need for PHP

Currently, I am focusing on a project that is small and emphasizes presentation more than security. The main objective is to create a form where users can input data, then click submit for all the information gathered to be sent to a specified 'mailt ...

phphtmlcss

Creating Stylish Checkboxes with Bootstrap

I'm attempting to customize a checkbox to have a specific appearance. example of desired checkbox design Here is what I have tried so far: <div class="col-2"> <label for="WitholdingTax">Charge</label> <div class="input-g ...

javascripthtmlcheckboxbootstrap-4alignment

Compatibility discrepancies for object-fit: cover as per observations from Mozilla and caniuse

I'm curious about the browsers that support the CSS property object-fit: cover. My usual sources for checking compatibility are the Mozilla browser compatibility table and caniuse, but they sometimes provide conflicting information. For example, while ...

csscross-browserobject-fitchrome-for-androidcaniuse

Directly insert an image into your webpage by uploading it from the input field without the need to go through the server

Can an image be uploaded directly from <input type="file" /> into an HTML page, for example through the use of Javascript, without needing to first save the image to the server? I am aware that AJAX can accomplish this, but if there is a way to ...

javascripthtmlinputimage

Div's external dimension not being computed

I am attempting to calculate the overall height of the div content in order to expand the sticky-container and create the appearance that the image is tracking the user. Unfortunately, using outerHeight does not seem to be effective for some reason. While ...

javascriptjqueryhtmlcss

Adjust the color of the entire modal

I'm working with a react native modal and encountering an issue where the backgroundColor I apply is only showing at the top of the modal. How can I ensure that the color fills the entire modal view? Any suggestions on how to fix this problem and mak ...

javascriptcsstypescriptreact-nativereact-native-modal

jQuery if statement appears to be malfunctioning

When the condition operates alone, everything works fine. However, when I introduce an 'and' operation, it does not function correctly. If only one of them is true, the code works. It also successfully takes input values. <!DOCTYPE HTML Code ...

javascriptphpjqueryhtml

CSS challenge: designing a tab interface

I am facing a CSS challenge that has got me stumped. I'm not even sure if it's achievable. Here is what I'm trying to achieve: There are three buttons/tabs displayed like this . When a tab is clicked, a different div should be shown for eac ...

csshtmltabs

Section content neatly framed by a stationary menu overlay

I created a menu structured like this: <div id="menu"> <a href="#p1">Paragraph 1</a> <a href="#p2">Paragraph 2</a> ... </div> and set it to have a fixed position: #menu { position: ...

htmlcsspositioncss-position

Eliminate Video Time Indicator

Can the video progress bar be removed from this specific video player? I would like it to be integrated into the embed code that I share with others. <iframe id="hapyak-player-157199-8825" marginwidth="0" marginheight="0" frameborder="no" scrolling=" ...

javascripthtmliframe

The jQuery toggle functionality seems to be malfunctioning

I have created a form that should toggle (hide and show) with the click of a button, but for some reason it's not working. Can someone please take a look at my code below and let me know what I'm doing wrong? $(document).ready(function () { ...

javascriptjqueryhtmlcss

"Exploring the process of utilizing AngularJS to open a .docx file in a new template

When attempting to open a .jpeg or .pdf file in a new template using an iframe, it was successful. However, the same approach failed when trying to open a .docx file. How can this issue be resolved? Angularjs code: $scope.openTemplate = function ($fpath ...

htmlangularjsiframe

Removing scrollbar from table in React using Material UI

I successfully created a basic table using react and material UI by following the instructions found at: https://material-ui.com/components/tables/#table. The table is functioning properly, but I am finding the scrollbar to be a bit inconvenient. https:// ...

htmlcssreactjstypescriptmaterial-ui

Starting Web Server using File (file://) protocol

I'm currently using Quasar to develop a Vue SPA web app/page. For this project, the web app will only run by clicking on the index.html file generated by the Quasar packager. This package will not be distributed online or hosted on any domain. My mai ...

javascripthtmlnode.jsvue.jsquasar-framework

Using *ngIf together with fxFlex.lg and fxFlex.xl is causing compatibility issues

One of the challenges I faced involved a div element with a conditional *ngIf statement and responsive layout values set using fxFlex.lg="30" fxFlex.xl="50": <div class="project-test__element" *ngIf="myCondition()" ...

htmlcssangular