Welcome to WebmasterWorld Guest from 54.224.5.186

Forum Moderators: not2easy

Message Too Old, No Replies

How to set my own icons using Icon fonts

     
2:37 pm on Mar 26, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1042
votes: 0


I have set HTML:
<!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;
}
[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;
}


What is the correct way to see icons like phone and E-mail?
8:04 pm on Mar 26, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13682
votes: 446


.ui-icon-phone:after {
background-image: url("..(images/iphone_16x16.png");
background-size: 18px 18px;
}

Does that work? I would have thought that a background doesn't show up unless it's a background of something. Even if the something is only an &emsp;.
7:19 am on Mar 27, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1042
votes: 0


I'm not sure.
Check official link jQuery Mobile 1.4:
[jquerymobile.com...]

.ui-icon-myicon:after {
background-image: url("path/to/your-icon.png");
background-size: 18px 18px;
}
12:18 pm on Mar 27, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


<rant>
The link tag does NOT have a closing / after it.
The <br> tag does NOT have a closing / after it.
Quit doing that.

In HTML4.01 it's invalid. In HTML5, you can do it but 1) it's meaningless, 2) browsers ignore it and 3) it takes up useless space and bandwidth on the wire.

So there is no point in doing it that way so ... quit doing that.
</rant>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members