Member Avatar for toplisek 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/styles1.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src=""></script>
</head>
<body>
<div data-role="page">

<br /><br /><br /><br /><br />
<div class="row-of-icons">
<a class="icon-alone" href="#Email"><span data-icon="phone" aria-hidden="true"></span><!--<span>E-mail</span>--></a>
<a class="icon-alone" href="#Phone"><span data-icon="email" aria-hidden="true"></span><!--<span>Phone</span>--></a>
</div>


</div>
</body>
</html>

CSS:
.ui-icon-phone:after {
background-image: url("..(images/iphone_16x16.png");
background-size: 18px 18px;
}
.ui-icon-mail:after {
background-image: url("..(images/mail_16x16.png");
background-size: 18px 18px;
}
[data-icon]:before {
font-family: icons;
content: attr(data-icon);
speak: none;
}
.icon-alone {
display: inline-block;
}
.icon-block {
display: block;
}
.ui-body-c .ui-link, .ui-body-c .ui-link:hover {
color: #00FF00;
text-decoration: none;
font-size: 2.5em;
}

How to solve and see my own images (icons)?

  • 2 Contributors
  • 1 Reply
  • 221 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

Short answer: the immediate problem is a malformed URL and a selector / pseudo-element mismatch. As noted, the path in the CSS is wrong (the ( should be a / and the url() needs a closing ) and matching quotes). Also confirm that the CSS selector actually targets the same element or pseudo‑element that jQuery Mobile is rendering for the icon — misnamed classes or the wrong ::before vs ::after will make a correct image path still not show.

Useful checklist and quick fixes:

  • Fix the URL syntax and confirm the path is relative to the CSS file. For example use url("../images/iphone_16x16.png") (CSS resolves paths from the stylesheet location, not the HTML file).
  • Check for name mismatches: the HTML uses data-icon="email" but the CSS targets .ui-icon-mail — inspect the generated element to see what class jQuery Mobile actually adds (it may be ui-icon-email or ui-icon-mail). Align the names or target the data-icon attribute directly.
  • Confirm the pseudo-element: inspect the element with DevTools to see whether the icon is drawn with ::before or ::after. If the theme injects content with ::before, then styling ::after won’t work.
  • If [data-icon]:before is supplying text (e.g., content: attr(data-icon)), override that when using images (for example set content: "" on the pseudo-element that will show the background). Also ensure the pseudo-element has display:inline-block and explicit width/height so the background is visible; add background-repeat:no-repeat and background-position:center.
  • Use DevTools → Network to look for a 404 on the image, and check Computed Styles to verify the background-image value. Clear cache or hard reload after changes.

If scalability or color control is needed later, consider using inline SVG or icon sprites instead of single PNGs.

Member Avatar for pritaeas

The path in your background-image is invalid. Replace the ( with a /

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.