You can use your own icons in combination with Custom CSS. make sure you save yoru icons with no backgrounds and PNG files for best results.
Copy and edit the following code into the Custom CSS section of your mobile site. Be sure to put the proper referance to your png files wherever they reside.
a.ui-link-inherit {
padding-left: 45px !important;
}
ul.iArrow li:nth-child(1) a.ui-link-inherit {
background-image: url("http://www.yourdomain.com/your-icon.png") !important;
background-position: 3px center;
}
ul.iArrow li:nth-child(2) a.ui-link-inherit {
background-image: url("http://www.yourdomain.com/your-icon.png") !important;
background-position: 3px center;
}
ul.iArrow li:nth-child(3) a.ui-link-inherit {
background-image: url("http://www.yourdomain.com/your-icon.png") !important;
background-position: 3px center;
}
ul.iArrow li:nth-child(4) a.ui-link-inherit {
background-image: url("http://www.yourdomain.com/your-icon.png") !important;
background-position: 3px center;
}
ul.iArrow li:nth-child(5) a.ui-link-inherit {
background-image: url("http://www.yourdomain.com/your-icon.png") !important;
background-position: 3px center;
}
ul.iArrow li:nth-child(6) a.ui-link-inherit {
background-image: url("http://www.yourdomain.com/your-icon.png") !important;
background-position: 3px center;
}
Comments
1 comment
The problem with this is it adds the icon to all pages. How can I limit it to the home page? It cenetered the icon on the banner on subsequent pages as well...
Please sign in to leave a comment.