Custom image as icon in header bar

StackOverflow https://stackoverflow.com/questions/23515040

  •  17-07-2023
  •  | 
  •  

Question

I'm trying to do a very simple task since 2 days while learning Jquery Mobile framework !!!

How to add a custom icon and a centered title inside the header bar of a JQuery page .. ? There's a lot of post and all refers to "button" icons, that's not my goal.

I just want to set a custom IMAGE on the left side of my header ... as 99% of any web application I think.

Why is it so hard to put in place such basic things ?

I tried this following official doc and posts:

HTML

<html><head>
<title>JQM</title>    
<meta name="viewport" content="width=device-width, user-scalable=no , initial-scale=1"/>    
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>    
<link rel="icon" type="image/icon" href="/images/favicon.ico"/>    
<link href="/css/steel/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css"/>                
<link href="/css/site-mob.css" rel="stylesheet" type="text/css"/>
<script src="/js/jquery-1.10.2.min.js" type="text/javascript"> </script>
<script src="/js/jquery.mobile-1.4.2.min.js" type="text/javascript"> </script></head>

<body><section data-role="page" id="main-page">
<header data-role="header" id="top" data-icon="myimage"><h1>Page Title</h1></header>
<div id="content" data-role="content"/>
<div id="footer" data-role="footer" data-theme="a"/></section></body></html>

CSS (/css/site-mob.css)

.ui-icon-myimage {
  background: url(/images/myimage.png) 50% 50% no-repeat;
  background-size: 38px 38px;
}

but it doesn't work. No image displayed. .... I'm certainly missing something ..

Thanks for your help

Was it helpful?

Solution

To put an image/logo in the header you do not need to use a custom icon, just place an img tag within an absolutely positioned container:

<header data-role="header" id="top" data-icon="myimage">
     <span style="position: absolute; left: 0; top: 0;"><img src="http://lorempixel.com/38/38/business/2/" alt=""  /></span>
    <h1>Page Title</h1>
</header>

In this example, I am using a SPAN absolutely positioned to the top left corner of the screen. You can adjust LEFT and TOP or the margins to place it as desired.

To create custom icons in jQM 1.4, use the :after pseudo tag:

.ui-icon-myimage:after {
  background: url(http://lorempixel.com/38/38/business/1/) 50% 50% no-repeat;
  background-size: 38px 38px;
  background-color: transparent;
  border-radius: 0;
}

Setting the background to transparent and border-radius to 0 removes the rounding and the gray background disk.

To display the icon inline (not on a button), you can do this:

<span class="ui-icon-myimage ui-btn-icon-notext inlineIcon"></span>

Then add CSS for inLineIcon:

.inlineIcon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 6px;
}

DEMO of both image in header and inline custom icon

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top