I have a navbar with a custom breakpoint of 990px in which it will collapse after that point. The navbar works fine in modern browsers, but in IE8 it does not. I do have respond.js and html5shiv polyfills in my HEAD, so I am unsure why IE8 is not respecting my NAVBAR media queries. Does anyone have any idea as to what is going on?
My demo is here.
#media (max-width: 990px) {
.navbar-header {
float: none;
}
.navbar-left, .navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display:block !important;
}
}
#media (max-width: 991px) {
#desktopNav {
display: none;
}
}
#media (min-width: 992px) {
#mobileNav {
display: none;
}
}
HTML code for navbar:
<header class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="logo"><img src="http://placehold.it/222x102" width="222" height="102"></h1>
<nav id="mobileNav" class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobileNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="mobileNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
</div>
</nav>
<nav id="desktopNav" role="navigation">
<ul class="nav nav-pills pull-right">
<li class="active">Home</li>
<li>Products and Services</li>
<li>Showcase</li>
<!-- <li>About</li>-->
<li>Order Products</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<!--/.col-lg-12-->
</div>
<!--/.row-->
</header>
Head tag:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Site</title>
<link href="css/bootstrap.css" rel="stylesheet">
<style>
<!-- css here -->
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Respond.js has known issues with IE8. You can't use #import statements on IE8 and Respond.js. If your css is on CDN you need to perform additional setup steps to get Respond.js running with IE8.
IE8 doesn't support the boxing model, so property box-boxing cannot be combined with max-heigth, min-height, min-width and max-width.
Check of you hace one of these issues, and see the Respond.js documentation
It seems that your media query is not working in the IE8.
So, Use css3-mediaqueries-js instead of respond.js.
Put this code in your head tag.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Also, you can check this two answers as well.
Answer 1
Answer 2
Related
I'm making bootstrap skeleton for a WordPress site on top most header section I had video background which is working fine when I added another section content from that section overlapping to header section
my site looks like
my code looks like
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
body {
font-family: 'Roboto', sans-serif;
}
/* ======================= Header ======================== */
#background {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
opacity: 0.78;
}
.header .text-contant {
margin-top: 40%;
}
.header .text-contant h1,
.header .text-contant p{
color: #fff;
}
.header .text-contant h1 {
text-transform: uppercase;
font-family: 'Sansita', sans-serif;
font-weight: bold;
}
.header .text-contant p {
letter-spacing: 1px;
}
.header .text-contant i {
padding-top: 33px;
color: #fff;
}
#media(max-width:992px) {
.header .text-contant {
margin-top: 50%;
}
}
#media(max-width:768px) {
.header .text-contant {
text-align: center;
}
}
#media(max-width:480px) {
.header .text-contant {
margin-top: 80%;
}
}
#media(max-width:320px) {
.header .text-contant {
margin-top: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap Boilerplate</title>
<!-- Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto|Sansita:400,700" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ===================== HEADER ============================= -->
<section class="header">
<video autoplay loop muted poster="/img/pexels-photo-27884.jpg" id="background">
<source src="/vdo/River%20-%206815.mp4" type="video/mp4">
</video>
<div class="container text-contant">
<div class="row">
<div class="col-sm-8">
<h1>My WordPress</h1>
<p>Just Another WordPress Theme</p>
</div>
<div class="col-sm-3 col-sm-offset-1">
<i class="fa fa-chevron-circle-down fa-4x" aria-hidden="true"></i>
</div>
</div>
</div>
</section>
<!-- ===================== MAIN ============================= -->
<section id="article">
<div class="container">
<div class="row">
<div class="col-md-8">
<article class="blog">
<div class="blog-meta-detail">
<i class="fa fa-clock-o" aria-hidden="true"> February 17 2017 </i>
<i class="fa fa-user" aria-hidden="true"> cannelflow</i>
<i class="fa fa-folder" aria-hidden="true"> Music,Tech</i>
<i class="fa fa-tags" aria-hidden="true"> Tag 1,Tag 2</i>
</div>
<div class="blog-title">
<h2>Sample Blog Post 1</h2>
</div>
</article>
</div>
<div class="col-md-4">
<aside class="sidebar"></aside>
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/js/jquery-3.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
thanks in advance
I would suggest to use a fixed height for the video, using media queries to change the video height as you reduce the windows width (for mobile and tablets websites). Then the best way to position the html over the video is using flexbox. For cropping the video you can user margin-top : <0px;
You code is too complicated and I can not fix it, you should have posted an example of your problem and then we could help.
I have a collapsable list that works perfectly fine in Chrome, but when I open up FireFox and view it, it looks all wonky. I opened up the debugger and there were no declaration errors, is there something I'm missing?
(Cant post images yet!)
How it looks in Firefox ->
(http://i.imgur.com/SbcTnGU.png)
How it looks in Chrome ->
(http://i.imgur.com/ofYp755.png)
.collapsibleList li>input+* {
display: none
}
.collapsibleList li>input:checked+* {
display: block
}
.collapsibleList li>input {
display: none
}
.collapsibleList li list-group-item>.badge {
float: right
}
.collapsibleList label {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: 0px;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer
}
Using Firefox 49 with the snippets below, the code you pasted above worked flawlessly with some minor HTML parsing tweak.
<html data-ember-extension="1" class="fa-events-icons-ready" lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="https://use.fontawesome.com/b703330c8c.css" media="all" rel="stylesheet"></head>
<body>
<style>
.collapsibleList li>input+* {
display: none
}
.collapsibleList li>input:checked+* {
display: block
}
.collapsibleList li>input {
display: none
}
.collapsibleList li list-group-item>.badge {
float: right
}
.collapsibleList label {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: 0px;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer
}
</style>
<h1>Hello, world!</h1>
<ul class="collapsibleList">
<li><label class="list-group-item" for="mylist-node6">Highest Win Ratio<span class="badge">Click Me!</span></label>
<input id="mylist-node6" type="checkbox">
<ul>
<li class="list-group-item">
<img src="avatar”"> #1 Name <span class="badge">61.76% </span>
</li>
<li class="list-group-item">
<img src="avatar"> #2 Name <span class="badge">50.75% </span>
</li>
<li class="list-group-item">
<img src="avatar"> #3 Name <span class="badge"> 44.59%</span>
</li>
</ul>
</li>
<li class="list-group-item ">
<i class="fa fa-gamepad"></i> ClassicHG Leaderboards
</li>
</ul>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/b703330c8c.js"></script>
</body></html>
I'm attempting to create a grid using PureCSS and have discovered a behavior I don't understand. I want the left part of the grid to take up 1/3 of the page and the right the remaining 2/3:
# index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test PureCSS</title>
<link rel="stylesheet" href="http://yui-s.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://yui-s.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="header">
<div class="home-menu pure-menu pure-menu-horizontal">
<a class="pure-menu-heading" href="#">Test Page</a>
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">Home</li>
<li class="pure-menu-item">Tour</li>
<li class="pure-menu-item">Sign Up</li>
</ul>
</div>
</div>
<div class="pure-g">
<div class="l-box-lrg pure-u-1 pure-u-md-1-3">
<div class="content-wrapper">
<div class="content">
1-3
</div>
</div>
</div>
<div class="l-box-lrg pure-u-1 pure-u-md-2-3">
<div class="content-wrapper">
<div class="content">
2-3
</div>
</div>
</div>
</div>
</body>
</html>
Here's the CSS:
# base.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.home-menu {
padding: 0.5em;
text-align: center;
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.l-box-lrg {
padding: 2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.content-wrapper {
/* These styles are required for the "scroll-over" effect */
position: absolute;
top: 87%;
width: 100%;
min-height: 12%;
z-index: 2;
background: white;
}
#media (min-width: 48em) {
.content {
padding: 1em;
}
}
In Chrome, which uses Blink, this page renders as expected. But in Firefox, which is Gecko-based, the left 1-3 div gets stacked on top of the right 2-3 div. In the past, problems like this were caused by having a space at the end of a div. However, I've checked my code and it doesn't have any extra spaces. I read somewhere about how these rendering engines handle display:block versus display:inline-block differently so maybe that has something to do with it. But I would think that if PureCSS was developed by Yahoo, they would have factored any rendering engine differences into their framework so that this wouldn't happen.
Most probably its because of the user agent stylesheet try and check if the body doesnt have padding or margin applied to it
I have a situation in which I want to change an HREF in an unordered list in HTML when a CSS media query is true. Specifically I want to change an HREF from
calendar.html to calendar2.html in the following page. Is this even possible?
Here is the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/cliffsteele.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11;IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
#media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
.header {
display:none;
}
.maincontent{
text-align:left;
}
.content {
width: 100%;
}
.footer {
display:none;
}
.sidebar1 {
float:none;
display:none;
}
.maincontent div {
text-align:left;
}
.calendar {
width=550%;
}
}
</style>
<title>Untitled Document</title>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Cliff's Show Schedule</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
-->
</style>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />
<link href="cliff.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<script type="text/javascript" src="p7pm3/p7PM3scripts.js"></script>
<link href="p7pm3/p7PM3-01.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="container">
<div class="header"><img src="Pictures/logo.gif" alt="Logo" name="Insert_logo" width="81" height="63" id="Insert_logo" style="background: #8090AB; display:block;" />
<!-- end .header --></div>
<div class="content">
<div id="p7PM3_1" class="p7PM3-01 p7PM3 p7PM3noscript horiz menu-centered rounded auto-subs sub-left">
<ul>
<li>Home</li>
<li>Resort
<ul>
<li>Our Facility</li>
<li>Boarding & Daycare</li>
<li>Grooming</li>
<li>Rates</li>
<li>Our Guests</li>
</ul>
</li>
<li>Show Handling
<ul>
<li>Info</li>
<li>Rates</li>
<li>Schedule</li>
</ul>
</li>
<li>Photo Gallery</li>
<li>About Me</li>
<li>Contact Me</li>
</ul>
<script type="text/javascript">P7_PM3op('p7PM3_1',1,8,-5,-5,0,1,0,1,0,1,1,1,0,900,1,0)</script>
</div>
<br />
<!-- InstanceBeginEditable name="heading" -->
<h1 style="margin: 10px; clear: both; text-align:center; font-size: xx-large; font-family: Georgia, 'Times New Roman', Times, serif; padding-top:20px;">Cliff's Show Schedule</h1>
<!-- InstanceEndEditable -->
<div class="maincontent"><!-- InstanceBeginEditable name="content" -->
<iframe class="calendar" src="https://www.keepandshare.com/calendar28/show.php?i=2585375&ifr=y&colorreset=y&nw=y&vw=week28&themeChoice=0&md=30&nopopup=n&fsz=11&noviewmenu=y&noname=y&nobreak=y&noprint=y&norequest=n&nosearch=n&norss=y&noovl=y¬z=y&fd=n&sa=y&exedit=n&nonav=n&scroll=y" width="700" height="600" scrolling="Yes" frameborder="1"></iframe><p align="center">View a Mobile Version of this Calendar</p><!-- For help on embedding calendars go to http://support.keepandshare.com/support/solutions/97807 -->
</iframe>
<!-- InstanceEndEditable --></div>
<!-- end .content --></div>
<div class="sidebar1"><!-- InstanceBeginEditable name="sidebar" -->
<p style="font-size:larger; font-family:'Comic Sans MS', cursive"> </p><p style="font-size:16pt; font-family:'Comic Sans MS', cursive"> Most shows close two weeks prior to show date on Wednesday.</p>
<p style="font-size:16pt; font-family:'Comic Sans MS', cursive"> Call early if you would like me to handle your dog.</p>
<p><a style="font-size: small;" href="http://www.infodog.com/showinfo/showCal.htm" title="Infodog" target="_new">Enter a show via Infodog</a
></p>
<!-- InstanceEndEditable -->
<!-- end .sidebar --></div>
<div class="footer">
<div style="float:right">
<p> <a href="MAILTO:rickzipser#hotmail.com" >Site Designed by Fredric M. Zipser</a><br />
</p>
</div>
<div class="clearfloatleft">
<p>Clifford W. Steele Professional Handler <br />
1395 Rt. 6<br />
Carmel, NY 10512-1627<br />
United States<br />
ph:(845) 225-2463<br />
Cell:(845) 661-0010<br />
<a href="MAILTO:happydayskennelinc#hotmail.com" >happydayskennelinc#hotmail.com</a></p>
</div>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
<!-- InstanceEnd --></html>
</body>
I think it will easy if you create both link in html
<li id="schedule_link_mobile">
<a href="calendar2.html" >Schedule</a>
</li>
<li id="schedule_link_pc">
<a href="calendar.html" >Schedule</a>
</li>
and then use the css to hide the one that you don't want to show
#schedule_link_mobile{
display: none;
}
#schedule_link_pc{
display: inline-block;
}
#media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
#schedule_link_mobile{
display: inline-block;
}
#schedule_link_pc{
display: none;
}
}
I don't think CSS can alter HTML attributes
you can just "hide" it, and display the other one
#media only screen and (...) {
.your-default-calendar {
display: none;
}
.your-calender2 {
display: inline-block;
}
}
but why not just use JavaScript? you can change a attribute easily in JavaScript.
if (window.matchMedia("your media queries").matches) {
// ...
}
On a related note... You can manipulate HTML using CSS content ...
The following taken from Chris Coyier at CSS-tricks.com
.email-address:before {
content: "Email address: "; }
<ul>
<li class="email-address">chriscoyier#gmail.com</li>
</ul>
And the output would be like:
• Email address: chriscoyier#gmail.com
The question to ask is: How will the hidden content be used.
The display CSS property hides HTML that is already built. If you have mobile, tablet, and desktop HTML, the application can be building HTML and applying CSS 3x while only displaying once.
If it will be turned on and off, display works. If it will use either a mobile or a tablet or a desktop display and never use the others, using Javascript to add the content is better.
Note that AngularJS has ngIf and ngSwitch directives that accomplish that only using HTML attributes.
I am working on jQuery mobile on intel-xdk and trying to set navbar in footer with custom icons. I have tried so many codes and tried to change the icons. With jquery.mobile-1.4.1 i am unable to find and set custom properties for nav bar icons. Now i tried my code with different versions which are not the latest ones:
1)1.2.1 and 1.8.1 these are working and allowing custom nav bar icons. When i used latest jQuery which is 1.4.1 I find ui-icon attribute in css but I found that it is applying through 1.4.1.js. I am stuck with that and want to use jQuery also for the slider. For this I have to use jQuery1.4.1 but with that I am unable to get custom nav bar icons. Any solution?
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--First try with it(its not working)-->
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" />
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script> -->
<!--Second try with it(its working)-->
<!-- <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script> -->
<!--third try with it(its not working)-->
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script> -->
<style>
.ui-icon-taifun {
background-image: url("taifun.png");
}
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon-taifun {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon {
background-image: url(taifun.png);
background-position: 0 0;
background-repeat: no-repeat;
}
</style>
<title>Test</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Pets</h2>
<ul data-role="listview">
<li>Canary</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Farm animals</h2>
<ul data-role="listview">
<li>Chicken</li>
<li>Cow</li>
<li>Duck</li>
</ul>
</div><!-- /collapsible -->
</div>
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
</div>
</body>
</html>
For 1.4.x, custom icon background is assigned to the :after css selector:
.ui-icon-taifun:after {
background-image: url("taifun.png");
}
Then to use this icon in your buttons, data-icon should be set to "taifun" or whatever text you use after ui-icon-
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
Here is a DEMO