homepage Welcome to WebmasterWorld Guest from 54.163.89.8
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to set my own icons using Icon fonts
toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4657444 posted 2:37 pm on Mar 26, 2014 (gmt 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?

 

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4657444 posted 8:04 pm on Mar 26, 2014 (gmt 0)

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

toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4657444 posted 7:19 am on Mar 27, 2014 (gmt 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;
}

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4657444 posted 12:18 pm on Mar 27, 2014 (gmt 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved