I would be best that you include both your relevant CSS and HTML code when posting.. even better if you can post a link. There are no one size fits all solutions, so it is best to see the actual implementation.
That being said, the following is just a conceptual solution. Anyhow you were CLOSE in your solution. You dont need the IMG for the icon nor the extra div.
IF I can assume the the "chat now" is a LINK within a branding ( image) area then you could code it this way:
<div class="bubble"><a href="chatPage.html>Chat Now</a></div>
background: url (bubble.jpg) no-repeat;
height: (height of bubble.jpg) ;/*optional*/
width: (width of bubble.jpg);/*optional*/
padding-left: (width of icon + white space);
background: url(icon.jpg) no-repeat (1/2 of whitespace)px center;
min-height: (height of icon);
top: ( use this to position your 'button');
left: ( use this to position your 'button');
again that's just a rough idea.. but hopefully it helps