Changing color of Font Awesome Icons upon hover, without any animation

I need assistance with changing the color of font awesome icons on hover without any animation. Specifically, I want the icon colors to transition from indigo to blue and finally red when a user hovers over them, without the colored icon appearing abruptly (I can't remember the name of the animation type).

<div class="clearfix">
    <a href="#" class="btn btn-icon btn-social btn-sm white no-radius no-borders">
        <i class="fa fa-facebook" aria-hidden="true"></i>
        <i class="fa fa-facebook indigo" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn btn-icon btn-social btn-sm white no-radius no-borders">
        <i class="fa fa-twitter" aria-hidden="true"></i>
        <i class="fa fa-twitter blue" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn btn-icon btn-social btn-sm white no-radius no-borders">
        <i class="fa fa-google-plus" aria-hidden="true"></i>
        <i class="fa fa-google-plus red" aria-hidden="true"></i>
    </a>
</div>

Your assistance is greatly appreciated.

Please note: I have already reviewed Change color when hover a font awesome icon?

htmlcssbootstrap-4

Answer №1

Check out this Css code snippet. 

.fa-facebook, .fa-twitter,.fa-google-plus {
 -webkit-transition-property: none;
 -moz-transition-property: none;
 -o-transition-property: none;
 transition-property: none;
  animation-name: none;
}


.fa-facebook:hover, .fa-twitter:hover,.fa-google-plus:hover {
 color: indigo;
 -webkit-transition-property: none;
 -moz-transition-property: none;
 -o-transition-property: none;
 transition-property: none;
  animation-name: none;
}

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

What is the best method to assign a CSS class to specific nodes within a TreeView using CodeBehind?

I need to apply unique styling to certain nodes in the codebehind. Within my TreeView, parents have two categories of children. One category matches the parent type (e.g. organizationalUnit), while the other does not (e.g. organizationalMembers). I aim t ...

c#asp.netcsstreeview

Blurry text can be a common occurrence when applying the transform(-50%,-50%) function to center

I have found a way to center a section using the following code: <div class="clock-section"> <h5 id="clock-title">We will be arriving soon</h5> <hr class="hr" id="cdhr"> </div> Here is ...

htmlcsstransformblur

Is it possible for me to customize the CSS of the masterpage for a specific aspx file?

Recently, I completed a website that was almost ready to be published. However, my client now wants to add a new page with similar content as the main masterpage (including the logo, menu, and a few buttons), but with some changes in colors and background ...

htmlcssvb.net

How to implement a scrollbar for tables using Angular

How can I implement a vertical scroll bar only for the table body in my Angular code? I want the scroll bar to exclude the header rows. Since all rows are generated by ng-repeat, I am unsure how to add overflow style specifically for the table body. Here ...

javascripthtmlcssangularjs

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

document.querySelectorAll('.sidebarCategory').forEach(el =>{ el.addEventListener('click', e =>{ let sub = el.nextElementSibling if(sub.style.maxHeight){ el.classList.remove('opened&apos ...

javascriptcsscss-transitions

The design of the Bootstrap alert button is not working properly as it fails to close when clicked on

While experimenting with Bootstrap, I encountered an issue with the bootstrap alert button that seems to be malfunctioning. I simply copied the code from Bootstrap's official website: https://i.sstatic.net/DRLIg.png However, upon testing it on my pag ...

htmlcssbootstrap-modalbootstrap-5

Personalized HTML selection list

When a select option is too long, it stretches the container to accommodate its length. I have created a truncate function to limit the display to 20 characters and add ellipses to prevent this stretching. I have been searching for a way to show the entir ...

javascriptjquerycss

What are some creative ways to animate a highlight effect on a CSS

I'm struggling to implement a sliding underline effect for my top navigation bar on hover. I've tried using transitions and keyframes, but so far it's not working as expected. My current attempt only triggers the effect on the parent elemen ...

htmlcssanimationcss-animationsnavbar

Setting up global color variables for React with Material UI theming is essential for ensuring consistent and

Is there a way to customize the default material-ui theme using global CSS? Additionally, how can we incorporate HEX values for colors when setting primary and secondary colors in the theme? In my App.js root file, I have defined a custom theme and want t ...

cssreactjsmaterial-ui

Develop a MySQL table using AJAX and HTML within a Cordova application

I've been developing an app using Cordova and I'm looking to create a feature where users can create and join different rooms to perform various actions. Despite trying multiple tutorials and scouring the internet, I'm struggling to understa ...

phphtmlmysqlajaxcordova

Chrome is experiencing a delay in closing the Select Option dropdown menu

On my webpage, I have two select option buttons placed on different tabs. Whenever one button is changed, I want to update the value of the other button and assign it to a specific element like a span in the example code provided. While everything works sm ...

javascriptjqueryhtmlcssgoogle-chrome

Unable to create a clickable button within a CSS3DObject using Three.js

How can I create an interactive button on a CSS3DObject within a cube made up of 6 sides? The button is located on the yellow side, but I'm facing issues with clicking on it. Whenever I attempt to click on the button, the event.target always points to ...

javascriptcssthree.js

Tips for embedding Jquery code within Vuejs applications

Trying to code a Vue.js Navbar that changes color when scrolling using Jquery and CSS script. It works, but I encountered an error with Vue.js not supporting the syntax '$' after page refresh, resulting in a "$ not defined" error message. As a ne ...

javascriptjquerycssvue.js

Which HTML element does each script correspond to?

Are there any methods to identify the script used in certain HTML elements? For instance, if I wish to determine the script responsible for creating a drop-down menu, I can locate the HTML and CSS for the menu but not the JavaScript (or other scripts). I ...

javascriptjqueryhtmlcss

Creating a circular image in a responsive navigation bar

Currently, I have a chat navigation bar with divs representing different users, each displaying a photo of the user. My goal is to have these photos displayed as perfect circles. To achieve this, I am using padding-bottom and width properties. However, I a ...

javascripthtmlcss

Using Selenium to Implement Accept Policy Targeting

I am attempting to locate and click on a button from dekudeals using selenium. Specifically, I am trying to target the accept button within the site's policy window. The button that needs to be clicked can be found here. I have made several attempt ...

pythonhtmlseleniumweb-scraping

Enhancing Your Vue Experience: A Guide to Highlighting and Selecting HTML Elements on Mouse Hover

Incorporating a navigation header using Vue, I utilize v-html to display it seamlessly. Check out the demo - here <section class="text-gray-700 font-heading font-medium relative bg-gray-50 bg-opacity-50"> <nav class="flex justify ...

htmlvue.js

Using Ajax to make a request on the same page but specifically within a column

I'm currently experimenting with AJAX to display live CSV data on my website. Right now, the AJAX script triggers on button click, but what I really want is for the data to be shown in a grid view without requiring a refresh or clicking a button. Howe ...

ajaxhtmlcsv

Using CSS to position a pair of divs containing text and images side by side

Is there a better approach to creating two divs and two pictures without using negative margins, similar to the example shown here? ...

csslayout

The functionality of the Bootstrap dropdown list button is not functioning properly on mobile devices

Currently, I am in the process of developing a website and testing its mobile view on my iPhone. The website is still using bootstrap 3, but I have encountered some issues. When I tap on the navigation button on my iPhone, nothing happens - no dropdown lis ...

javascriptjqueryhtmlcsstwitter-bootstrap