Custom theme causing icons to not appear on screen

I've been experimenting with jQuery mobile and designed a custom theme using themeroller. Following the instructions, I added the necessary links in the <head>:

<link rel="stylesheet" href="themes/mycustomtheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>

Although my custom theme is working flawlessly, when I try to use an icon like this:

<a href="#home" data-transition="slideup" data-role="button" data-icon="home">Home</a>

The "home" icon does not appear as expected. Instead, it just shows an empty circle.

I am using Google Chrome. Any insights on what I can add to fix this issue?

jqueryhtmlcssjquery-mobileicons

Answer №1

Keep in mind that using data-role="button" is no longer recommended in version 1.4 and will be completely removed in version 1.5, as classes should now be added manually.

<a href="#page" class="ui-btn ui-btn-icon-left ui-icon-home">Anchor</a>

In addition, jQM has transitioned to using SVG icons for platforms that support SVG, while normal icons are used for those that do not. Icons are now added after an element using the pseudo selector :after.

Creating custom icons is as easy as applying the following CSS style.

.ui-custom-icon:after {
  background-image: url('custom-icon.png');
  background-size: 25px 25px; /* make sure to include this line */
}

To use a custom icon, simply add the class .ui-custom-icon to any desired element.

See Demo

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

The Power of Jquery's load() Function for Loading Text

Is there a way to show the content of file.txt along with any text on the <title id="mytitle"></title> tag? $(window).on('load', function() { $("#mytitle").load("/file.txt"); }); The content of file ...

htmljqueryajaxfunctionload

Utilizing Jquery's .load function will temporarily deactivate all other functions

Season's Greetings everyone! I have a unique personal messaging system on my website that utilizes jQuery for message display and manipulation. Let's delve into the specific file that controls this functionality: <!-- Fetching and displaying ...

javascriptjqueryload

Customizing jquery-template based on specific field values during rendering

In a separate file named section.htm, I have the following template: <h3>${Name}</h3> {{each Variables}} {{tmpl($data) Type}} ${Type} | ${Name} | ${Value} <br/> {{/each}} I am trying to render different templates based on th ...

javascriptjqueryjquery-templates

The grid is out of alignment, causing elements to jump to the next row

After taking an online course at TreeHouse, I used the provided HTML & CSS code and made some adjustments to create a layout with 10 columns instead of the original 12 within a 1000px container. The columns were converted to percentages to fit my needs. I ...

htmlcssgridfluid

Troubleshooting problems with CSS background-image cover styling

My sanity is hanging by a thread as I struggle with an issue on my new webpage. I'm working on a project at www.romaheritage.co.uk/beta, and I can't seem to get a background image to show up in the "contact" section near the bottom of the page wh ...

htmlcssbootstrap-4

Transforming HTML into a JSON structure

Currently, I am in the process of converting some older code into a JSON object for a project. The task involves taking the result set from an SQL query and translating the categories it returns into JSON format. As someone with limited knowledge in JavaSc ...

htmljson

Filtering option exclusive for body rows in the table

I'm looking to customize this filter to specifically target <tbody> rows in my table and display only the thead rows as the output. $("#searchInput").keyup(function() { var rows = $("#AR").find("tr").hide(); var data = this.value.split( ...

jquery

Is there a way to execute a function immediately after an element has completed rendering?

I am facing a challenge where I need to dynamically set the height of one element based on the height of another element. Initially, when the target element finishes rendering, it's 490px tall. However, when I try to retrieve the height of the other ...

javascriptjquerydomdom-events

Steps to programmatically obtain the code for a contentPlaceHolder

I am seeking a way to extract the code of a contentPlaceHolder utilizing various Html parsers. The challenge is that I require a url, which is not feasible due to it being a masterpage. Essentially, there is a select tag where you can choose an option, tr ...

javaandroidhtmlmaster-pageshtml-content-extraction

The concept of transparency in Internet Explorer 8 stands out in

Has anyone been able to achieve transparency in IE8 for the foreground color, not just the background color? I've tried various solutions but they all seem to focus on the background color. I need the transparency effect for user-generated colors, so ...

javascripthtmlcssinternet-explorer-8opacity

What is the best method for sending form data and dropzone files simultaneously through AJAX?

Just starting out in the world of jQuery and Dropzone! I've run into a problem with dropzone.js. I need to send form data (such as custom name, ID, DOB, etc.) along with image files that are dropped into the dropzone. Can anyone help me figure out h ...

phpjqueryjsondropzone.js

I am experiencing an issue with my Spring MVC form:select option where the options are not displaying on the screen, although

Utilizing the spring MVC model attribute technique, I encounter an issue where I am unable to display a drop-down list on the screen. Even though I can see the values in the HTML source code, the drop-down is not visible during runtime. @RequestMapping("/ ...

htmljspspring-mvcspring-bootjsp-tags

The app is opening the index.html file instead of the expected index.jsx file

After creating a page with React.jsx, I encountered an issue where my page was initially opening index.jsx upon running npm start. However, when I deleted and then restored the index.html file to "public", the page started opening index.html instead. This ...

htmlreactjsnpmjsxdelete-file

When attempting to input data into the database, an error is displayed stating that /test.php cannot be POSTed

Every time I try to input data using PHP, it throws an error Cannot POST /test.php. I've been attempting to fix it with no success. Can anyone please help me solve this issue? It's crucial for my project work. Here is my HTML code: <html> ...

javascriptphphtmlcss

toggle section visibility depending on the width of the screen

Currently working on a responsive website and looking for ways to hide/show sections based on screen width. I am not a fan of using media queries because I want the browser to only load necessary sections. For example, I have a large gallery with many pict ...

jqueryangularjsresponsive-design

Showing content from a text file inside a Bootstrap modal

I have encountered an issue with my modal on the main page. I used jQuery to retrieve data from a text file, and while I can successfully console log the data, the field in the modal appears blank once opened. Any idea why this is happening? Below is the ...

jquerybootstrap-modal

Achieving a half-faded effect for an image using CSS

https://i.sstatic.net/4SMsM.jpg In the image provided, there is a need to smoothly fade half of it without relying on opacity for the effect. The current method does not achieve the desired smooth fading effect. ...

htmlcss

Learn the process of updating a specific section of a Facebook share link using AJAX dynamically

Here's an interesting scenario I'm dealing with. I'm trying to create a modification to the Facebook share button link where a portion of the link is replaced by a user ID number. This way, when someone clicks on the shared link, it will dir ...

javascripthtmlmysqlajaxfacebook

Creating a JavaScript regular expression for formatting time input without using any external plugin

As I work on implementing a time input mask with the meridian of am|pm without using an input mask plugin, I've encountered some challenges. The input should not allow the user to start with alphabets, but my current pattern, although it works, clears ...

javascriptjqueryregexinput-mask

Struggling with the transition of a CSS navigation menu from hover to focus

I'm attempting to transition a "mega menu" from 'hover' to 'focus'. My goal is to have the dropdown menus appear "on click" and remain visible until another top-level selection is clicked. Ideally, I am looking for a CSS-only solut ...

htmlcss