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

"During a single click event, the jQuery AJAX function is invoked a total of 6

For my project using C# MVC 5, I have implemented an AJAX call on the client side with the following code snippet: function addEventListener() { $('#createNotification').bind('click', function (e) { if($('# ...

jqueryajaxjquery-validate

How can I delete already uploaded files before adding new ones in fileupload js?

I am facing an issue while using fileupload js to upload multiple files. The problem is that when I add files for the first time and then try to replace them with different files, all the files get uploaded instead of just the new ones. Can anyone guide me ...

jqueryfile-uploadjquery-file-upload

Utilizing AJAX capabilities with Mysqli, PHP, and jQuery for efficient web development

Is it possible to implement ajax in php and mysqli to dynamically display data from a database without the need for any user input, such as clicking a button? I want new information to be visible on the page instantly after adding a row to the table, witho ...

phpjqueryajaxmysqli

From jQuery to PHP: when there's not much input

Using jQuery to send HTTP requests to my PHP page on Apache/Linux. I make sure to validate client-side to prevent empty requests. However, occasionally an empty request slips through: $_POST and $_GET collections are empty Content-Len ...

phpjqueryajaxhttp

What is the best way to set a newly selected HTML option as the first choice?

I'm facing a simple problem in JavaScript that I can't seem to crack. Admittedly, I am new to working with JavaScript. My issue lies with sorting a dropdown list in alphabetical order while also keeping the selected value at the top. Whenever a ...

javascriptjqueryhtmltwig

Vue - Display components next to sidebar

Having an issue with the vue-sidebar-menu. The sidebar is appearing over the components instead of beside them. Here is a screenshot of the problem: <template> <div id="app"> <sidebar-menu :menu="menu" /> <vue-page-transit ...

javascripthtmlcssvue.js

The styling of the Material UI autocomplete listbox does not affect its appearance

I am working on an autocomplete feature that groups items by titles. I am trying to adjust the height of the first group to be different from the rest, but I am facing some challenges since there is no unique identifier for the ul component. To work around ...

cssreactjsmaterial-ui

Tips for Customizing the StrongLoop LoopBack Explorer CSS

Our team is currently utilizing Strongloop's LoopBack framework for our REST APIs and we are looking to customize the CSS of the LoopBack Explorer. Unfortunately, it seems unclear which CSS files are being employed (LoopBack vs Swagger) and their exac ...

cssuser-interfaceloopbackjsstrongloop

Passing a variable through jQuery onClick event to a URL via GET request and subsequently loading the content of

After successfully passing variables through AJAX calls via onClick to a PHP file and loading the results on the initial page, I now face the challenge of passing a variable analogously via onClick to a PHP file but this time I need to either open a new wi ...

javascriptjqueryajax

Is there a way to eliminate the hover effect on a button within a navbar?

I'm currently working on a website using Angular and I have implemented a gray navbar with a hamburger icon that reveals a dropdown menu upon clicking. One of the menu items is "Projects," which when hovered over, displays individual links to various ...

htmlcssangular

generate a customized synopsis for users without storing any data in the database

In order to provide a summary of the user's choices without saving them to the database, I want to display it in a modal that has already been created. Despite finding some sources online, none of them have worked for me so far. Below is my HTML: &l ...

javascriptjqueryhtmlcss

An error was encountered: The object 'object object' does not have the 'on' method available

I want to experiment with this website: However, I am encountering an error without any events triggering. I am confused why the method "on" is not being found even on page load. <head> <link href="css/scrollable-horizontal.css" rel="styleshe ...

javascriptjquerygoogle-chromescrollable

Unusual Behavior of jQuery Ajax StatusCode

$.get('/users/test/' + username, { statusCode: { 409: () => { valid = false; alert(username + ' is unavailable'); }, 200: () => { valid = true; } } }); When sending a requ ...

jqueryajax

invoking the controller through the view with ajax

Having trouble calling a controller and passing the data stored in the variable mat. My attempt to call the controller function is not working. Any guidance on how to proceed with this issue? $('#buttonadd').click(function () { var mat = $(& ...

jqueryajax

Error encountered while executing Selenium Web Driver's executeScript method: [JavascriptError: missing ) after argument list] with name: 'JavascriptError'

return driver.executeScript("\ console.log('Error: Incorrect selection');\ $('option:selected', 'select[name='who']').removeAttr('selected');\ $('select[name='who'] ...

jquerynode.jsselenium

Is it possible to retrieve JSON data from the server without having to reload the page?

My approach to minimize server requests involves sending a JSON file to the client and working with that data instead. However, a challenge I'm facing is preventing the page from refreshing when receiving the JSON file. I want the data to be received ...

jqueryajaxjsontornado

Use jQuery's .each method to reiterate through only the initial 5 elements

Is there a way to loop through just the initial 5 elements using jQuery's each method? $(".kltat").each(function() { // Restrict this to only the first five elements of the .kltat class } ...

javascriptjqueryeach

Automatically Resizing an iFrame Height Upon Submit Button Click

Currently, I am facing an issue with a form that generates an iFrame for the Payment section. While the height of the iFrame is set correctly, whenever there are errors in the form submission and error messages appear, they push the submit button below t ...

javascriptjqueryiframe

Ways to update the background hue of a selected Navigation Tab?

One of the challenges I am facing in my React Project is with the Navigation Tab from material-ui. The issue I encounter is that the active tab should have a background color, and then revert to its original color when not active. However, the transparency ...

cssreactjsmaterial-ui

Ensuring the text is positioned centrally and at the bottom of a table cell

Is there a way to center and align text at the bottom of a cell in table? This is my desired layout: ...

htmlcsscss-tables