Font Awesome icons displayed using the <i class="icon-ok"></i> markup are not styled correctly and do not respond to events in Chrome

I implemented Font-Awesome, an iconic font designed for use with Twitter Bootstrap.

Here is the markup:

<i class="icon-remove reset-preference-button"></i>

And here is the CSS:

.reset-preference-button {
cursor: pointer;
}

For JavaScript functionality:

$(".reset-preference-button").on("click", function() {
// ... do something
});

However, when I view the page, the cursor does not change to a pointer upon hovering over the element. Clicking on the icon also has no effect, even though I have confirmed that the icon exists before binding the event.

It seems that setting the style of the element explicitly to "display: inline-block;" resolves this issue. This behavior is specific to Chrome, as it functions properly in Firefox and IE. I am encountering this problem on Chrome version 18, though it may affect other versions as well.

I have already reported this bug at https://github.com/FortAwesome/Font-Awesome/issues/157

jquerycsstwitter-bootstrapfont-awesomejquery-events

Answer №1

The reason for this issue is the lack of content in the <i> element - font awesome utilizes the css pseudo element :before to display the icon using css.

To resolve this, you can specify a height and width of 1em and change the display to: block

i {
  width: 1em;
  height: 1em;
  display:block;
  cursor: pointer;
}

Answer №2

A more streamlined method involves adding the styles directly to the :before element, eliminating the need to consider the object's dimensions.

Below is a snippet of CSS code as an example:

i:before {
  cursor: pointer;
}

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

Cause a malfunction in the triggering function of jQuery

$(document).ready(function(){ jQuery("#but1").bind("click",function(e){ alert(e.name); }); jQuery("#but1").trigger({name:'Dmy', surname:'My'}); }); The information doesn't seem to be getting passed correctly a ...

javascriptjquery

Which domain do I need to use: Google or my own, in order to bypass the Access Denied issue in JQuery

I'm currently experiencing a puzzling issue with my website while using Internet Explorer. Despite loading fine in other browsers, I keep encountering a permission denied error within my JQuery code. What's even more perplexing is that this error ...

phpjqueryhtmlinternet-explorer

Is there a way to specifically style the element I am hovering over with Tailwind Typography and prose?

Currently, I am customizing my markdown pages with Tailwind typography and prose. I am facing an issue where the hover effect is being applied to all images at once instead of just the one being hovered over. Any ideas on how to fix this? Here is a snippe ...

cssfrontendtailwind-cssmarkdown

Updating the DOM after scrolling using jQuery

jQuery hover functionality is not working correctly after scrolling. $(document).ready(function() { $('img').hover(function(){ alert('hello'); },function(){ alert('hello not'); }); }); When hoveri ...

javascriptjqueryhtml

When dynamically adding input fields in Bootstrap, there is a smaller gap between inline inputs

When adding a new list item dynamically in a modal using jQuery append, the spacing in the first li element seems to have a larger gap between the input fields compared to the rest that are added later. Even after checking the developer tools and confirmin ...

javascripthtmlcsstwitter-bootstrapbackbone.js

What is the best way to focus on the N elements contained within another element?

Here is an example html input: <div class="grid--item user-info user-hover"> <div class="user-gravatar48"> <a href="/users/22656/jon-skeet"> <div class="gravatar-wrapper-48"> ...

htmlcssbeautifulsoupcss-selectors

User Authentication with AJAX

Looking to enhance the website login form by implementing ajax functionality. When a visitor fails to log in, I want a message to display without having to refresh the page. If the visitor successfully logs in, they should be redirected to default.asp. I ...

jquery

Can you please guide me on retrieving information from an API using HTML, CSS, and JavaScript?

My task is to develop a web application using HTML, CSS, and JS with the following functionality: Retrieve a list of users from this API: https://jsonplaceholder.typicode.com/users. Upon clicking on a user, show a list of albums associated with that user ...

javascripthtmlcssjsonajax

How can I show/hide a div based on checkbox click on my website? It works in jsFiddle, but not on my actual site. Any suggestions?

Is there a way to show or hide a div based on a checkbox click? I've got it working in jsFiddle, but for some reason, it's not functioning properly on my website. Any thoughts on how to fix this? My goal is to offer multiple payment methods (cre ...

javascriptjqueryhtmlcss

Optimize Your Website for Various Screen Sizes

Can anyone assist with centering my webpage on small screen sizes? Everything looks good at the normal width of 989px, but once it shrinks, it shifts to the left and leaves excess white space on the right. I've tried various methods to correct this is ...

csshtmlfluid-layout

Issue with running the Jquery each function within a textbox inside an ASP.NET gridview

Below is the gridview markup: <asp:GridView ID="gvDoctorVisits" runat="server" DataKeyNames="AdmissionId" class="tableStyle" AutoGenerateColumns="False" Width="100%" EmptyDataText=& ...

javascriptjqueryasp.net.netaspxgridview

Reasons for aligning inline elements with input boxes

I am facing a challenge with aligning a series of inline elements, each containing an input text box, within a single row. The number and labels of these input boxes can vary as they are dynamically loaded via AJAX. The width of the div housing these inli ...

javascripthtmlcss

Bug with IOS double tap on Element UI VueJS select input element

Encountering a strange problem on iOS safari or chrome. When attempting to select an option from a dropdown input, the options show up correctly on the first tap, but when trying to actually select an option, it requires two taps to work properly. This is ...

cssiosvue.jsmobile-safarielement-ui

The asynchronous ajax function fails to work properly when setInterval is activated

My issue is that only the initial execution of the updateProgress function happens while waiting for the completion of syncDNS. All subsequent calls made via setInterval remain on hold until syncDNS finishes. Can anyone explain why this is happening? $( ...

javascriptjqueryajax

Infinite loop using jQuery function endlessly

I'm trying to create a jQuery Animation that loops indefinitely, but my current code doesn't seem to be working. Here's what I have: $(document).ready(function() { var i = 0; document.write(i); function runAnimatio ...

javascriptjquery

Ways to display the dynamically created Bootstrap modal

I'm currently working on a WordPress website where I am showcasing the Events section on a specific page. To allow users to view more events, I have implemented a "load more" button that fetches additional events using AJAX. Each event, when clicked, ...

phpjqueryajaxwordpressbootstrap-modal

What are the methods to avoid caching on a streamed audio file?

I am in the process of developing a small HTML5 audio player that streams audio files. The play and pause controls are being managed by jQuery and are functioning correctly. However, I have noticed that when I stop playback and then restart it, the audio ...

jqueryhtml5-audio

Safari displays an inexplicable gray border surrounding the <img/> element, despite the actual presence of the image

https://i.stack.imgur.com/4QR52.png There is an unexpected gray border visible around the dropdown image, as seen above. This occurrence has perplexed me because, according to several other queries, this problem arises when the image's src cannot be ...

csssafari

The controller element in AngularJS becomes undefined when invoked within a directive

Presented below is a snippet of my controller: myApp.controller('WizardController', function ($scope, $http) { $scope.user = { addressline1: null, cobuyer: null, validate: null, cobuyerfirstname: null, cobuyerlastname: null, ...

javascriptjqueryangularjs

CSS selectors can be used to alter the styling of the container surrounding the text

My current content includes: <span> Hello </span> I am looking to apply CSS selectors to either replace or enclose the text inside the element with an <h1> Is it doable using only CSS selectors? ...

htmlcss