Currently, I am working on a Cordova application and encountering an issue where the icons appear low resolution when running it on Android or a browser. I came across a solution online advising to add the following code snippet to the meta tag:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, target-densitydpi=device-dpi, user-scalable=0, target-densitydpi=medium-dpi" />
However, this did not solve the problem for me...
You can view the problem in action through this fiddle: LINK
This is how I am implementing the icons in my code:
<i class="ui-icon-departure ui-btn-icon-notext inlineIcon"></i>
And this is the corresponding CSS:
.ui-icon-departure:after {
background-image: url("../img/icons/departure-icon.png");
background-color: transparent;
background-size: 18px 18px;
}