Creating colored text icon to use in php script (see image)

Question

I would like to be able to create icons/colored CSS text blocks such as these:

I have no idea where to start looking for these as I have no idea wather this is HTML, PHP, or just CSS or a combination of them.

Thanks in advance.

EDIT: I have looked at the source code, but all I see is that they are class files to something, can't trace it down.

Answer 1

A combination of twitter bootstrap with font awesome should be good to start with. Here are the links - http://twitter.github.io/bootstrap/
http://fortawesome.github.io/Font-Awesome/

Answer 2

Most of these look like Bootstrap Badges or Labels with some kind of icon font. Lots of Icon Fonts

They are also quite simple to use...

DEMO

<span class="label">Default Label <i class="icon-globe icon-white"></i></span>
<span class="label label-success">Success Label <i class="icon-tag icon-white"></i></span>
<span class="label label-important">Important Label <i class="icon-hand-right icon-white"></i></span>
<span class="label label-warning">Warning Label <i class="icon-hand-left icon-white"></i></span>

Results in:

It also wouldn't be that difficult to craft your own with a little bit of CSS and some icon-fonts. HTML:

<span class="label"><span class="fontelico-emo-beer"></span> Beer Me!</span>

CSS:

@import url(http://weloveiconfonts.com/api/?family=fontelico);

/* fontelico */
[class*="fontelico-"]:before {
  font-family: 'fontelico', sans-serif;
}
.label{
    background-color: green;
    font-size: 0.7em;
    padding: 0.4em;
    border-radius: 0.4em;
    color: white;
    font-family: arial, helvetica;
}

Which results in something like this:

DEMO