Guide for adding a rotating fontawesome icon within a hyperlink?

I am currently utilizing FontAwesome 3.1.0, and I have encountered an issue with a simple code snippet that is not functioning as expected:

<a href="/">
    <!-- other html content -->
    <i class="icon-spinner icon-spin"></i>
</a>

Interestingly, changing the a tag to div resolves the problem.

Is there a way to enable the CSS3 animation feature? Or is it simply not achievable? I prefer not to resort to changing it to a div element and achieving link-like behavior through JavaScript.

UPDATE:

The aforementioned code actually works perfectly fine on platforms like jsfiddle. However, when implemented on my webpage, it does not animate properly. It seems that there might be an underlying conflict that eludes my understanding.

For example:

Experiment by editing a.post-agree-amount:first where an 

<i class="icon-thumbs-up"></i>
is present. Upon replacing it with 
<i class="icon-spinner icon-spin"></i>
, the animation ceases to function. Even relocating this <a> tag within the DOM using browser code inspector fails to initiate the animation. Curiously, converting <a> to <div> triggers the animation successfully.

I typically browse with Google Chrome 28.0, but have also observed this behavior in Firefox 22.0.

htmlcssfont-awesome

Answer №1

Identified the issue and found a solution.

Discovered that CSS3 animations do not function properly with display: inline elements, and Bootstrap's css included a rule that caused <i> icons to have display: inline. However, for <i> icons located inside a.btn, Bootstrap's css applied display: inline-block to them.

Therefore, the simple fix is to apply display: inline-block to those i.icon-spinner.icon-spin inside the links.

(Acknowledgment to Praveen for valuable input)

Answer №2

Great job on getting your code to work, as shown in this working fiddle. Just a quick note: it's important to ensure that the icons tag <i> is placed outside the anchor tag to prevent it from being hyperlinked.

Here's how you can make the necessary change:

<i class="icon-spinner icon-spin"></i>
<a href="http://google.com">Google</a>

For reference, here is the updated Working Fiddle.

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

challenge with incorporating rating system using jQuery

I am facing a simple issue here, but my knowledge of jQuery is limited and I'm struggling to find a solution. I have been trying to implement a rating function using the code from this link: Everything seems to be working fine, but I noticed that on ...

jqueryhtmlcssjquery-selectors

Placing two texts alongside a logo in a Bootstrap Navbar: Step-by-step guide

As I venture into the world of Bootstrap, I am on a quest to create a Navbar Component similar to this design: https://i.stack.imgur.com/NidKQ.png I attempted to use the Navbar Image and Text code, but encountered an issue where the text would only displ ...

htmlcssbootstrap-4bootstrap-5nav

Populate the containing div with an image element

I am looking to fill a parent div with an img, but I want the image to be a standalone img element inside the div, rather than setting it as a background property. To clarify, instead of this: div { background-image: url('someimg.jpg'); ...

htmlcss

When you include ng-href in a button using AngularJS, it causes a shift in the alignment of the text within the button

Recently, I've been delving into Angularjs with angular-material and encountered a slight issue with ng-href. I created a Toolbar at the top of my webpage, but the moment I include the "ng-href" attribute to a button, the text inside the Button loses ...

javascripthtmlcssangularjs

The color of the Bootstrap font remains unchanged and the responsiveness of the navbar button is not functioning correctly

Just starting out with frontend development and my professor recommended trying Bootstrap for practice. I attempted to code a simple webpage, but ran into some issues. Here is the code I used: https://github.com/nguyencuc2586/project1 I encountered a pro ...

htmlcssbootstrap-4bootstrap-5

Struggling to bring an md-button to the front within md-tabs

I'm attempting to insert an md-button into a md-tabs section. Through the use of developer tools, I can confirm that the button is present, but it's not visible: Check out the screenshot here. I tried adjusting the z-index in the CSS to a high ...

cssangularjsangular-material

Internet Explorer experiencing off-screen menu loading issue

Currently, I am in the process of developing a website for my sister but facing challenges with cross-browser compatibility. The menu appears off-screen when using Internet Explorer, while it looks fine on Chrome. Despite various attempts to adjust alignme ...

htmlcsscross-browser

Enhancing Image Quality in Microsoft Edge

I'm trying to figure out how to make an image scale with bicubic in MS Edge. Is there a CSS solution or something similar that can change this behavior? Check out this page: On the right side of the page, there are two images with textured backgroun ...

cssmicrosoft-edge

Having difficulty arranging the elements in a straight line

I am currently working on designing the footer for my website. My goal is to have 2 divs and one list displayed inline within this footer. However, I am facing an issue where using the CSS Property display:inline-block is not achieving the desired result. ...

htmlcss

Ways to delete an attribute from a DOM element with Javascript

My goal is to use JavaScript to remove an attribute from a DOM node: <div id="foo">Hi there</div> First, I add an attribute: document.getElementById("foo").attributes['contoso'] = "Hello, world!"; Then I attempt to remove it: doc ...

javascripthtml

"Struggling with the height of Bootstrap row not filling the entire space

I've tried everything but nothing seems to be working. Whether it's a simple height: 100% or experimenting with flex-grow: 1, none of it is doing the trick. I'm having issues with this site I'm currently working on: https://i.sstatic.n ...

htmlcssbootstrap-4sass

Layered parallax scenery

I'm interested in creating a parallax effect similar to this example. https://medium.com/@PatrykZabielski/how-to-make-multi-layered-parallax-illustration-with-css-javascript-2b56883c3f27 However, I find the use of HAML and Coffeescript in the mentio ...

javascriptjqueryhtmlparallax

Is there a way to deactivate or hide a button in Angular 9 when the user navigates from the current page to the previous one?

ABC page has both a "Back" and "Next" button. After clicking the "Next" button, I am directed to the XYZ page, which also includes a "Back" button. When I click the "Back" button on the XYZ page, I should be brought back to the ABC page without seeing th ...

htmlcssangular

Deleting a li element within an AJAX response function can be accomplished by targeting the specific

I am attempting to remove the li element that is the parent of the clicked a element. Here is the code I am using: function vanish(id_arg){ $.ajax({ url: "/vanish/", type: "POST", data: {id_to_delete: id_arg}, ...

javascriptpythonhtmlajaxdjango

Tips for arranging files within a directory in Netbeans IDE

I prefer to centralize all CSS files in a single folder for easy access. Below is the path of my CSS directory: css/sampl.css. Here, css represents the folder. This is the code snippet I am using: <link href="/CSS/sampl.css" rel="stylesheet" type="te ...

javacssjspurlnetbeans

I decided to uninstall Bootstrap, but now I find myself unable to make any CSS changes

After attempting to uninstall Bootstrap, my application.css no longer seems to have any effect on my app. Any suggestions on how to resolve this issue? Here is a breakdown of the steps I took that led to this problem: - Removed require bootstrap from app ...

cssruby-on-railstwitter-bootstrapruby-on-rails-4

CSS Animation glitch with images

I am currently facing an issue with a slide that transitions between four pictures. The slide is set at a specific pace, but I am encountering a problem with the transition from the last slide back to the first one. I have attempted various solutions such ...

htmlcssanimationtransitionslide

how to enable drag and drop functionality based on names in angularjs

In my project using angular js, I have implemented a drag and drop feature that allows items to be dragged between cells in two directions. I now want to enhance this functionality by allowing members with 'a's (e.g. 1a, 2a, etc.) to be dragged ...

htmlangularjs

Tips on transitioning from Modal1 to Modal2 in Ionic after a successful submit button press?

My survey app requires users to fill out a form and click the Submit Feedback button. Upon successful submission, a message saying "Feedback submitted successfully" should be displayed in Modal2, which is inside another modal named (Modal1). However, being ...

javascriptcssangularionic-frameworkmodal-dialog

jQuery Hide function malfunctions when the contents of divs are sorted

I stumbled upon some jQuery code that can arrange divs either numerically or alphabetically based on their content. To enhance this functionality, I included a feature to hide a div by clicking on it. While sorting the divs and hiding them individually wor ...

jqueryhtmlsortinghide