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/
Currently, I am utilizing NPM along with various angular packages. As per the tutorial on Basic Grid Part 1 at this link, I am encountering challenges. This is my file directory structure: D:/nodeStuff/uiGrid includes: node_modules uigrid.css uigrid.h ...
Currently, I am working on creating a form with two input fields - one for text and the other for file upload. However, the issue I am facing is that the Browse button for the file input is being displayed inside the input box. My goal is to have the butto ...
I'm currently utilizing JQuery's $.get method to retrieve a twitter feed and showcase it on my website. Strangely, I am encountering an issue where no data seems to be fetched (i.e., the code within function(d) { ... } is not being executed). Thi ...
Currently, I am attempting to customize a TextField component in a unique way using the sx prop: <TextField size="small" sx={{ padding: '1px 3px', fontSize: '0.875rem', lineHeight: '1.25 ...
I am attempting to apply the "isChecked" class to the parent div when a checkbox is checked, using the ngClass directive. Here is the HTML: <div ng-class="{isChecked: (isChecked_1 == 'true')}"> <input type="checkbox" id="check_ ...
Is there a way to add text on a transparent background layer placed over an image without using the background-image property? In my case, I am working on an HTML Emailer and must utilize the img tag instead. Any suggestions on how to achieve this? < ...
Is it possible to apply two background images to the same div? I want one image to repeat along the x-axis and the other to appear only once. I've tried using multiple background images, but I'm not sure how to target specific rules for each bac ...
I created a JavaScript script to send form data to my PHP backend. However, the text field was receiving it with incorrect encoding. Here is the meta tag on my website: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Here&apo ...
Recently, I encountered an issue with jquery flot while working on a real-time chart. Everything seemed to be functioning properly at first, but after some time had passed, I noticed a significant problem. Initially, the chart was updating correctly; howe ...
Below is my code snippet: .section-one { position: relative; background: #ffffff; } .section-one h2 { color: #000000; font-size: 32px; margin: 0px 0px 10px 0px; padding: 0px; font-family: "AzoSans-Medium"; } ... /* ...
My current project involves developing a custom bar chart generator that must meet specific criteria: Input fields for entering data to display on the chart The ability to drag and resize bars once the chart is generated I've conducted research and ...
I'm aware that autoplay of audio is not supported on Android devices. However, I recently found a website that successfully autoplays music on an Android device: Can someone explain how this is being achieved? ...
Just starting out with JS/JQuery programming, so please excuse any mistakes or unclear explanations. Any feedback is welcome, even if not requested specifically. I am working with multiple drop down lists that are populated dynamically by data from SQL Ta ...
It appears that I am encountering a problem with the hover functionality. When my screen is at full size, hovering over a menu option causes the entire background color to change. However, upon resizing the screen, only a part of the background color chang ...
I have a JSON array stored in my database {"dashboard_layout":[10,9,4,5]} Although I am able to sort the items, I am facing an issue with updating the sort values in the database. $('#sortable').sortable({ helper: fixWidthHelper, ...
I just added the file to my git repository and shared the link here. Is there a specific way to do this? html{ background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg"); } ...
I am attempting to display a vertical list of radio buttons within a table cell. Is this achievable? Here is the code snippet I am currently working with: <table> <tr> <td> First Name </td> ...
Can someone please assist me with adding a logo to my CSS navbar? I am struggling to figure out how to do this and would appreciate any guidance or tips on how to successfully implement a logo in the navbar. body { margin: 0px; } ul { list-style-ty ...
I have a list of items that are displayed using the following code: <li class="dropdown-item" data-toggle="tooltip" uib-tooltip="tooltip goes here" data-placement="left" data-ng-repeat="result in items.results.contextValues.rows " ...
When working with google charts, the code for generating a chart often looks something like this: var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices&apo ...