Icon fonts with my own images

This site is best viewed in a modern browser with JavaScript enabled.

toplisek

I have set code but icons are not seen. Why is this?


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" 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="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></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;
}
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;
}

Sup3rkirby

I could be wrong but I'm pretty sure this line isn't valid CSS:

background-image: url("..(images/iphone_16x16.png");

It's a little hard to tell you exactly what it should be given I have no idea where these images are on your server (or in relation to the page they are on). But it's possible the intended code would be:

background-image: url("../images/iphone_16x16.png");

And please note there are 2 lines like this in your CSS. Both (all) should be corrected.

toplisek

It is just sample to see Icons fonts sample.
Validation:
This document was successfully checked as HTML5!


<!DOCTYPE html>
<html>
<head>


<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<title></title>
<link href="css/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/styles5.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">

<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>


.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;
}
.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;
}

Sup3rkirby

I'm a bit unclear on your last post... what's the status of your problem, resolved or no?

Your HTML was fine... it was just those 2 lines of CSS that I noticed were invalid (and seemed to be corrected now). If it's still not working then my guess is it depends on where those images are stored. You can actually debug the CSS itself to see if the images are being linked correctly.

If your right-click the icon's <span> tag in your browser and select 'Inspect Element' you can view the CSS associated with it in your browser's developer console. Here you should see the background-image property as well as the url it's linking to. You can click the URL to see if it is properly linked to an actual image or not.

toplisek

It is not an issue with HTML. I like to know how to connect
data-icon="phone'' with iphone_16x16.png as it is not working. Do you have some sample?

Sup3rkirby

At no point have I claimed you had an issue with your HTML...

Moving on, I'm not sure why I missed it before but your CSS doesn't seem to match the elements in your HTML in regard to the images. You are references two classes (ui-icon-phone and ui-icon-mail) which don't actually exist, thus those background images are not being applied to anything. Aside from that, if you were to add those classes to elements on your page you should set the actual width and height and would still need to set a display of block or inline-block as well as set an empty content string in order to get background images working on a :before or :after selector. For example:

.ui-icon-phone:after {
  background-image: url("../images/iphone_16x16.png");
  width: 18px;
  height: 18px;
  content: '';
  display: inline-block;
}
.ui-icon-mail:after {
  background-image: url("../images/mail_16x16.png");
  width: 18px;
  height: 18px;
  content: '';
  display: inline-block;
}

However, if I assume you want to do it a different way, without updating the classes used in your HTML, then you would have to change your CSS selectors to look something like this:

span[data-icon="iphone"] {
  background-image: url("../images/iphone_16x16.png");
  width: 18px;
  height: 18px;
  content: '';
  display: inline-block;
}
span[data-icon="mail"] {
  background-image: url("../images/mail_16x16.png");
  width: 18px;
  height: 18px;
  content: '';
  display: inline-block;
}

You can also append the :after class to those selectors, but it isn't necessary.

robertsullivan

Two things you need to check:

There may be problem with the link that you have used for image URL
background-image: url("../images/iphone_16x16.png");

You need to check this line of your code and also the style sheet Link you have included in which page you are using the style sheet.

The second thing is that where you have saved the icons. Are you using the correct path for that or not.