Font icon not appearing when toggling the class "before"

I am attempting to utilize two classes, both with a :before pseudo-element. When the target class is hovered over, the two classes swap. This functionality works correctly in Safari, but in other browsers, the icon at the bottom does not display properly. It only shows the hover state icon. Is there a way to use toggle class with fade or transition effects to slowly swap between the classes?

CSS:

.play{
    height:30px;
    width: 30px;
    color: rgba(62, 173, 236,0.7);
    bottom:0.2em;
    left:46.7%;
    position: absolute;
    display: inline-block;
}
.play:before{
    content: '\f04b';
    font-family: "Font Awesome 5 Free"; 
    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.pause{
    display: inline-block;
    height:30px;
    width: 30px;
    color: rgba(62, 173, 236,0.7);
    bottom:.6em;
    left:46.7%;
    position: absolute;
}
.pause:before{
        content: '\f28b';
    font-family: "Font Awesome 5 Free"; 
    font-size:27px;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

jQuery:

$('.platform_Slide').hover(function() {
$('.play').toggleClass('pause');

});

https://jsfiddle.net/kjs7gpz6/5/

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

Issue with menu height persisting while resizing screen

For my responsive design project, I am implementing a menu that switches to a menu button when the width is less than or equal to 768px. Currently, I am using jQuery to dynamically adjust the height of the menu when the menu button is clicked. The jQuery ...

What is the best way to trigger a jQuery UI dialog using an AJAX request?

My website includes a jQuery UI Dialog that opens a new window when I click the "create new user" button. Is there a way to open this window using an AJAX request? It would be useful if I could open the dialog-form from another page, such as dialog.html ...

Storing the path of a nested JSON object in a variable using recursion

Can the "path" of a JSON object be saved to a variable? For example, if we have the following: var obj = {"Mattress": { "productDelivered": "Arranged by Retailer", "productAge": { "ye ...

Ajax dropdown menu displaying 'Loading Data' message during processing

Is it possible to display a Please wait.. or Loading... label underneath my Combo box while data is loading? I would like to show a Loading... message under the switch box when switching between Male and Female. This is the HTML code: <body> & ...

Basic node.js server that responds with HTML and CSS

I have successfully created a basic http server to send an HTML file as a response. However, I'm struggling with how to also send a CSS file so that the client can view the HTML page styled with CSS in their browser. Here is my current code: var htt ...

Place two divs side by side with the second div filling up the remaining space on the line

Hello there, can anyone lend a hand with this problem? This is the code I have been working with: <html> <body> <div style="width=100%"> <div style="float:left; background-color:Red; height:100px">Red</div> <div st ...

The color of the text changes from its default color when not in use

Hey there, let me break this down for you... I'm currently in the process of styling a contact form. I've managed to change the text color of my input focus to white. However, when I click away from the form, the inputted text color reverts ba ...

How to find and pair up custom data attributes that are unfamiliar?

Is there a method to select elements with unspecified custom data attributes? When I say unspecified, I am referring to an element that could appear like this: <div data-unknown="foo"></div> or <td data-someOtherCustomDataAttribute="bar"& ...

Transforming JQuery Output into an HTML Table Layout

Hello there! I am currently working on parsing an XML file within my web page using jQuery. Here is a snippet of the code: function loadCards(lang) { $.ajax({ type: "GET", url: 'data.xml', dataType: "xml", suc ...

The width of DIVs in Mac Safari exceeds that of other browsers

Encountering an issue that is specific to MAC Safari. Here's the code snippet: <div class="wrapper" style="max-width:1220px"> <div style="width:50%;display:inline-block">First</div> <div style="width:25%;display:inline-block"&g ...

Rearrange elements within a div by clicking a button

I want to shuffle div elements with a click of a button using a dissolve animation in HTML5. An example of what I am looking for is similar to this website When you scroll on the page, there are links such as All, Intro, Solution. Clicking on any link sh ...

Is there a pure JavaScript solution to replace jQuery's .prev() function?

Looking for a JavaScript alternative to this jQuery code: $(".q-block-container").prev(".sub-block-container").css("border-bottom","none"); I am seeking a pure JavaScript solution that selects the previous sibling ONLY if it matches a specific selector ( ...

Sass can be used to create custom color classes for Bootstrap 5.3 that offer

I am currently using a Bootstrap 5.3 theme and I would like to give users the option to change the main color theme from the default blue to something like purple or orange. My idea is to create additional CSS files named "orange-as-primary.css", "purple- ...

Deleting a Session Cookie: Steps to Remove It

Is there a way to dynamically remove a session cookie using jQuery without having to restart the browser? I remember reading that session cookies are stored in browser memory and usually get deleted when the browser is closed. // sessionFooCookie represen ...

Tips for customizing the CSS file of a React component imported from a UI framework

As I embark on building a large application utilizing React, I find myself navigating the new territory of React philosophy coming from a background of Css+Js+jQuery methods. One key requirement for my project is a reliable UI framework that aligns with Go ...

Tips for storing a JavaScript string on a server using PHP and retrieving it at a later time

Let's simplify the issue I'm facing: I have a function that gets triggered when a button is clicked: $search.onclick = function () { // Assuming the user enters a valid document name, like "John" documentname = $('#userinput' ...

refresh-free form clearing

Currently, I am working on a form that includes Recaptcha validation using jQuery. The form is functioning well as the information is sent to my email and all required fields are checked before submission. However, there is one issue that I am encounterin ...

How to Set an Iframe Target with Ajax and Jquery?

I am working with zend-framework, iframes, ajax, and jquery to call a URL when a specific DIV is clicked. Here's how I am using an iframe: <iframe src="http://localhost.test.com/public/index/listen-message" name="listenMsg" height="120" width="60 ...

What is the best way to retrieve multiple value parameters in a jQuery AJAX success function?

Is it possible to retrieve multiple values in jQuery ajax success method? My objective is: $.ajax({ .... success: function(data, customValue) { dataTable.ajax.reload(); // The data here is an array that populates the datatable (in JSON format) $(" ...

Develop a feature within a standard plugin that allows users to add, remove, or refresh content easily

I have developed a simple plugin that builds tables: ; (function ($, window, document, undefined) { // Define the plugin name and default options var pluginName = "tableBuilder", defaults = { }; // Plugin constructor func ...