What is the best way to add an image/icon to a button in a PhoneGap application?

Hey there! I'm currently working on a phonegap app using CSS3 and HTML5. The app features two buttons in the same row, each with an icon wrapped around it and text displayed below the image. However, I'm facing an issue where the images are not showing up on the buttons.

_______________________________________
|    ____            ______           |
|   |    |          |     |           |
|   |    |          |     |           |
|   |----|          |-----|           |
|   button1         button2           |
|                                     |
|                                     |
|                                     |
|_____________________________________|

Here is the snippet of my HTML code:

<a href="#button1Page" data-role="button" data-icon="button1" data-iconpos="top" data-transition="pop"> Button 1</a> <br>
<a href="#button2Page" data-role="button" data-icon="button2" data-iconpos="top" data-transition="pop"> Button 2</a> <br>

Below is the CSS for the app:

ui-icon-button1  {
    background-image: url("img/icon1.png");
}
.ui-icon-button2 {
    background-image: url("img/icon2.png");
}

I would appreciate any assistance in resolving this issue. Thank you!

htmlcsscordova

Answer №1

Your CSS references classes that do not currently exist in any elements. You will need to add the following classes where you want them to be applied:

class="ui-icon-button1"

and

class="ui-icon-button2"

Make sure to include these classes in the tags where you would like the specified styles to take effect.

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

Equal-height rows and columns using Flexbox

I've been working on a row layout with two columns, each set to 50% width. The left column contains an image, while the right column displays text. Here is my HTML: .row{ display:flex; ...

htmlcssflexbox

"Comparing the Surprising Performance Discrepancy Between Safari's Private and Regular

While debugging OpenSpeedTest for 10Gbps, I noticed a significant performance gap between using a Private window versus a Normal window. https://i.sstatic.net/gSMuw.jpg I'm puzzled as to why this disparity exists. What steps should I take to investi ...

javascripthtmliossafarixmlhttprequest

Adding constantly changing information into unchanging HTML

My goal is to dynamically insert content from a Database into a static HTML file. I have successfully achieved this on the client side using JavaScript. Specifically, I need to retrieve values from the Database and place them in designated fields within t ...

c#html.netasp.net-mvc

Learn how to show an image within a textview on an android device

How can I show an image for HTML in a text view? Check out the resource below <blockquote>小浪观剧团:<p>【郭德纲《今夜有戏-济公传》】@北京德云社 15周年庆@郭德纲 相声专场演出，最新一季《济公传》， ...

androidhtmltextview

Angular directive failed to correctly retrieve object

I have a person object loaded from the backend that is structured as follows: { "PersonId":"19894711-2eb9-4edf-92c6-85de2b33d1bb", "Firstname":"Jacky", "Lastname":"Chan", "DateOfBirth":"1963-09-18T00:00:00", "CreateDate":"2015-12-11T09 ...

javascriptjqueryhtmlangularjsasp.net-web-api2

Avoiding the fontawesome icon within a Bootstrap button from being the only item to wrap to the next line

Explore a straightforward Bootstrap 4 button featuring a fontawesome icon. If this button is situated in a container that happens to be slightly smaller than its default width, the icon will shift to the next line. body { padding: 20px; } <link ...

htmlcssbootstrap-4font-awesomeline-breaks

How to create a border using a repeated image with spacing between each repetition

Is there a way to create a dashed horizontal line from an image and adjust the spacing between each dash using HTML and CSS? I feel like using javascript for this would be excessive. https://i.sstatic.net/YiD9q.png I'm encountering this issue with t ...

htmlcss

What are the steps to implement infinite scrolling in a Vue.js application?

Currently, I am attempting to implement an infinite horizontal scroll section in vuejs for a selection of products. However, I am facing difficulties achieving the infinite effect. My approach so far involved removing the card that goes out of view and add ...

javascriptcssvue.jsnuxt.jscarousel

How do I submit a form using jQuery .ajax() or .post() in a native iPhone Phonegap application?

Can someone help me figure out how to use jQuery's .ajax() or .post() in a Phonegap Native iPhone App to send data to a php file on my webserver? Do I need to format the data as xml or json, or can I simply send regular html post data? If anyone has ...

phpjqueryiphoneajaxcordova

Problem with jQueryUI Sortable cancel property preventing input editing

Currently, I am utilizing jquery-3.2.1.min.js and jquery-ui.min.js version 1.12.1 The task at hand is to create a sortable list where certain elements are not sortable (specifically, other sortable lists). It is crucial that the input elements remain edit ...

javascriptjqueryhtmljquery-uijquery-ui-sortable

Successfully retrieves the appropriate response, however the MySQL database fails to update when using PHP

I'm currently in the process of developing a straightforward registration form. I have a file dedicated to connecting to the database conn.php <?php $db_name = "bp_reader"; $mysql_username = "root"; $mysql_password = ""; $server_name = "local ...

phphtmlmysqlphpmyadmin

I'm looking to create a unit test for my AngularJS application

I am currently working on a weather application that utilizes the to retrieve weather data. The JavaScript code I have written for this app is shown below: angular.module('ourAppApp') .controller('MainCtrl', function($scope,apiFac) { ...

javascripthtmlangularjsunit-testing

Transitioning to a bootstrap or fluid design from a foundation of simple HTML and CSS

Although I am not a web designer by trade, I have a background in statistics and am currently working on building a website. I have sketched out the layout structure I desire using basic html and simple css to kick things off. However, upon further explora ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Show a grid layout featuring varying heights using HTML

I am trying to create a grid view for displaying images in an HTML document. I want each li tag to have a different height, but currently they are all the same height. Below is my HTML code: <div class="blog_main_midd_section"><ul> ...

htmlcssgridviewgallery

Browser crashes due to jQuery while loop issue

When using my jQuery code with a while loop to post data to a span ID, I am able to retrieve the span data but the post process crashes. while (ilkDeger < toplamDeger) { var yukle ="yukle"+ilkDeger ; var tekalan = &ap ...

phpjqueryhtmlajaxpost

Incorporate dynamic interval transitions to the carousel rotation

I'm currently working on implementing a carousel with 'Next' and 'Previous' buttons that slide through images. However, I've been struggling to get the auto-slide feature to work at regular intervals. If anyone has any sugges ...

javascripthtmljquerycss

The most sophisticated method for creating a 2x2 grid of divs

I have developed a quiz application similar to Buzzfeed with four answer options for each question. The layout on mobile devices is satisfactory, displayed in a 2x2 grid. However, when viewing the app on desktop screens, the answers appear horizontally in ...

htmlcssangularjs

The column width in Bootstrap HTML is too excessive

var parentDiv = document.getElementById("cc"); var statementDiv = document.createElement("div"); var statementName = document.createElement("div"); // var removeIconDiv = document.createElement("div"); // removeIconDiv.className = "col w-25"; // ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Adjusting the Size of a Slideshow: HTML Tutorial

I'm currently working on a project to develop an interactive website using PHP and HTML for educational purposes. My main challenge is trying to implement a 'slideshow' similar to the one demonstrated in this video: https://www.youtube.com/ ...

phphtmlcssslider

The arrangement of Bootstrap columns does not appear to be in alignment with one another

While utilizing Bootstrap 4, I am encountering an issue with the Footer section. My intention is to create three columns of equal width using the col-md-6 class as outlined in the documentation. Here is the code snippet: <footer class="footer"> &l ...

htmlcssbootstrap-4