In a recent announcement, the jQuery team unveiled new icons for their UI components. However, I have been unable to locate any examples of how to use them or where they can be downloaded from. Also, it appears that the themes in the ThemeRoller only provide icons with the standard size.
How exactly are these larger icon sets intended to be used (assuming they have indeed been officially released and are readily available)?
It seems that the feature you're looking for is not currently implemented in jQuery UI.
You may want to consider using fontawesome, as it provides the functionality you are seeking.
If you wish to align all jQuery UI icons with fontawesome, you can utilize this CSS replacement workaround:
/* Allow Font Awesome Icons instead of jQuery UI and apply only when using a FA icon */
.ui-icon[class*=" fa-"] {
/* Remove the jQuery UI Icon */
background: none repeat scroll 0 0 transparent;
/* Remove the jQuery UI Text Indent */
text-indent: 0;
/* Adjust position - jQuery UI is -8px */
margin-top: -0.5em;
}
.ui-button-icon-only .ui-icon[class*=" fa-"] {
/* Adjust position - jQuery UI is -8px */
margin-left: -7px;
}
/* Proper alignment for icon-large */
.ui-icon.icon-large {
margin-top: -0.75em;
}
This is one way to achieve the replacement, but you also have the option of using fontawesome icons directly like so:
<i class="fa fa-camera-retro"></i> icon-camera-retro
For more information, you can check out the related Q/A on Stack Overflow: Extend jQuery UI Icons with Font-Awesome
Check out the demo here: http://jsfiddle.net/IrvinDominin/bEd2R/
The answer has been updated for FontAwesome 4.0, which introduced changes to the CSS classes due to:
Icons have been renamed to improve consistency and predictability.
Reference:
CSS Code:
/* Allow Font Awesome Icons instead of jQuery UI and apply only when using a FA icon */
.ui-icon[class*=" fa-"] {
/* Remove the jQuery UI Icon */
background: none repeat scroll 0 0 transparent;
/* Remove the jQuery UI Text Indent */
text-indent: 0;
/* Adjust position - jQuery UI is -8px */
margin-top: -0.5em;
}
.ui-button-icon-only .ui-icon[class*=" fa-"] {
/* Adjust position - jQuery UI is -8px */
margin-left: -7px;
}
/* Proper alignment for icon-large */
.ui-icon.icon-large {
margin-top: -0.75em;
}
Although I am a proponent of vector fonts, my current work environment has restrictions through group policy settings that prevent our users from accessing these amazing fonts.
If I find myself needing to increase the size of icons while using jquery ui, I simply utilize the zoom property in the following way:
.ui-icon {
zoom: 125%;
-moz-transform: scale(1.25);
-webkit-zoom: 1.25;
-ms-zoom: 1.25;
}
It is important to recognize that this method may cause pixelation and misalignment as you zoom further in. Although not the most elegant solution, it can serve as a temporary fix while transitioning to a sprite map replacement.
The font scaling issue is apparent when using ver FA 4.0 and higher.
width: auto;
height: auto;
Implementing the update will somewhat improve the situation, but may not fully resolve it for fonts fa-2x and larger.
Check out the demo here: http://jsfiddle.net/LpC4L/
I'm really new to Jquery and most of this code isn't mine, I'm just using it as a learning tool for creating sliders. If someone could give me some guidance on how to make this slider work automatically when the page loads, that would be gre ...
Is there a way to automatically update the value of a drop-down list whenever a partial view is loaded via an AJAX call? Currently, the AJAX call successfully retrieves the necessary information, but the user still needs to manually change the location val ...
Looking to dynamically change the text of a div based on content from another page that pulls data from a database. Specifically, I have a URL "Ajax/popup.aspx?pID=23" which returns a simple HTML file with an h2 and some text. I plan to use .load function ...
I am a newcomer to jQuery and find myself in need of assistance after failing to find the necessary information on Google. I have a standard accordion menu with main menus (level-1) and submenus (level-2). Typically, only the level-2 links contain href lin ...
Looking to style the <title><p>AAA</p></title> and <meta name="decrition" content="AAA">. But when I added <p> and applied CSS with: p{color:red;size:1000px} The title is being displayed as <p>AAA</p> Any ...
As someone who is new to JavaScript, I find it challenging to grasp the concept, especially when incorporating it with HTML. Despite this, I decided to experiment with infinite ajax scroll functionality. Below is my code snippet: var ias = jQuery.ias({ ...
Currently facing a perplexing issue while developing a website using aspx.net and c#. The following code snippet is on my masterpage: protected void Page_Load(object sender, EventArgs e) { if (HttpContext.Current.Request.Url.AbsolutePath == "/ ...
When using html5 FormData to send files to the server, I am encountering an issue where the incoming photos object is always null. Despite seeing the files being sent in the network monitor, the type that I am expecting appears to be incorrect. Currently, ...
I've been working on an image slider that halts scrolling when the mouse hovers over it. However, I'd like to use div tags instead of image tags to create custom shapes within the slider using CSS. Does anyone have any advice on how to achieve th ...
I have incorporated the Mudblazor CSS framework into my Blazor WebAssembly project. Within the drag and drop zone, I have included a button that is supposed to remove each uploaded image. However, when I click on the remove button, it only opens up the fi ...
Is it necessary to compile SCSS and Stylus files into CSS before importing them into my Angular version 1 app? Are there any other alternatives available? Context: I have two applications, one using Angular 4 with SCSS and the other using Angular 1 with L ...
My form contains a text input field. To prevent the form from being submitted when ENTER key is pressed, I used this code snippet: jQuery("#inputTags").keydown(function(event) { if (event.keyCode == '13') { event.preventDefault() ...
I am struggling to grasp the problem and finding it challenging to explain it clearly, so I have attached a picture depicting the issue. https://i.stack.imgur.com/E9Gzj.png My current approach involves using ratios of 100% and 100vw for element widths. D ...
Recently, I've delved into the world of jQuery, JavaScript, and AJAX while experimenting with an API that I designed. The backend result I received looks like this: [ { "id": 1, "choice_text": "They work on List View generally", ...
When using an input text form, I need to ensure that users only insert values ranging from 1 to 10. However, my attempts to utilize a mask for customization have resulted in allowing values higher than 10. How can I restrict the input to only be allowed b ...
Currently delving into Selenium WebDriver with a focus on Java. My goal is to navigate through a date picker dropdown and select specific values for date, month, and year. Here is an example of the HTML tag: <dd id="date-element"> <input id="fro ...
Utilizing jQuery, I am dynamically generating new elements within an Angular Form that has been constructed using a Template Driven Forms approach. Despite successfully creating the dynamic elements, they do not seem to be assigned events/callbacks due to ...
I have a client who runs a WooCommerce WordPress site and they want the product image/link on the category page to open in a new tab when clicked. I have been attempting to use jquery to achieve this with no success. As I am relatively new to jquery, any a ...
I'm currently working on a website using Django all-auth for authentication. Everything is functioning perfectly, but I'm wondering if there's a way to increase the size of the username and password input boxes using HTML. Below is the code ...
Encountering an issue with PHPMailer that seems to be puzzling me. A simple form has been set up with AJAX and PHP, where the input values are sent to PHP for validation. Once approved, PHP collects all relevant data (name, email, message, etc.) and creat ...