Show text on image background

Question

I am trying to do something new for my project. I have an icon, lets say kind of like Mail icon.

When a page is loaded, the icon also gets rendered. Based on a query count I do in the background during page load, I would like to display that number (count) inside/on the icon. Kind of like how I see Facebook notifications displayed on top of the icon or Gmail shows there is 2 new emails on the icon, etc.

Initially, I was thinking of having a different icon for each number, since I had finite max limit for the count. But I am considering other options that are better to do programmatically.

Yes. I am asking if any one has done this before, how they have approached this situation. I said I can do this using a different icon for each number, but there should be some other way we can do this instead of creating 100s of icons if there are big numbers to display.. — ZVenue, Oct 02 '13 at 13:35
Are you talking about favicons or an actual icon somewhere on the page? Can the number be rendered as text or does it have to be part of the graphic? — Ennui, Oct 02 '13 at 13:36
I think this question should have been posted on [meta.stackoverflow.com](http://meta.stackoverflow.com) — vishalkin, Oct 02 '13 at 13:37
Its an actual icon on the page. I guess the number can be rendered as text.. all I need is to have a UI effect showing the icon and the number (on it or inside it) without having to have separate icon for each number (1,2,3,4 ... etc) — ZVenue, Oct 02 '13 at 13:38
@vishalkin How is this related to Stack Overflow itself? Please read http://meta.stackoverflow.com/help/on-topic — JJJ, Oct 02 '13 at 13:39
Please, check out [**this answer**](http://stackoverflow.com/questions/6964144/dynamically-generated-favicon). It seems to solve your problem. — gnclmorais, Oct 02 '13 at 13:44

score 6 · Answer 1 · answered Oct 02 '13 at 14:13

Despite being answered and accepted, just wanted to share how this could be done as I did it before in one of my projects. Putting it here as a code reference.

HTML:

<a href="#" class="icon" >
    <span class="jewel">2</span>
</a>

CSS:

.icon {
    position: relative;
    display: inline-block;
    height: 24px;
    padding: 0px 4px 0px 20px;
    background: ....;
}

.jewel {
    position: absolute; 
    display: block; 
    top: -8px; right: -8px; 
    height: 16px; width: 16px; 
    text-align: center; 
    color: White; 
    background-color: Red; 
    overflow: hidden; 
}

Working fiddle: http://jsfiddle.net/gE3hz/

thanks so much for providing solution. – ZVenue Oct 02 '13 at 14:52 — ZVenue, Oct 02 '13 at 14:52

score 4 · Accepted Answer · answered Oct 02 '13 at 13:39

4

I would recommend making the icon image the background of a div or so, then you can place the number on top of it as plain text, moving it around using padding.

answered Oct 02 '13 at 13:39

ced-b

3,957
1
27
39

1

Not sure why this was downvoted - it's the obvious answer. You need a `span` or `div` with a `background-image` which you will use to store the integer variable. – user1477388 Oct 02 '13 at 13:41
@ced-b .. thats a good idea. This is what I am looking for.. just general ideas on how to solve the displaying issue.. some get more pleasure downvoting questions than focusing on helping out. :-) – ZVenue Oct 02 '13 at 13:54
@ZVenue Yep - I'm glad that I could help though. – ced-b Oct 02 '13 at 14:14
@ZVenue No one has downvoted your question. But in its current form, it's not a good fit for Stack Overflow - so people have voted to close it. – Josh Darnell Oct 02 '13 at 14:18
@jadarnel27 you are getting into technicalities.. downvoting is not what I meant to say.. but you get the point. Why close it? why not focus on helping out.. like few others did.. if you cant help, then at least don't hinder spread of ideas and knowledge is my point. Obviously some feel that this is worth responding to.. with actual ideas and answers. – ZVenue Oct 02 '13 at 15:12
@ZVenue My apologies, I shouldn't have been pedantic about your terminology (I did know what you meant). The site has guidelines for what types of questions should be asked, though (see the [faq#dontask] secton on "what not to ask"). And those guidelines are there for a reason: to keep the quality of the site above that of traditional "discussion forums", and to generate the kinds of questions that attract experts. – Josh Darnell Oct 02 '13 at 15:25

Show text on image background

2 Answers2

Linked