How do I create an icon like this in CSS?

Question

I need to create simple icon in css like this - about 32x32 px.

I'd like to make it as simple as it could be (html - no unnecessary divs). The text should be vertically and horizontally aligned to the center of each half.

The text displayed will be short (about 9 chars max, font-size about 10px). It should have static height and width. ALSO The text has to be written in tags (like or

) so it'd be accessible by CMS.

Here is my solution, which I find wrong, because the height and width is not static:

jsfiddle.net/s2DRr/1/

Answer 1

What's Going On

I use the i element to create icons. Normally with an image, or more recently an icon font, but we can adapt for your needs. (Originally the i element wasn't used for icon, and it is debatable whether it's semantically correct. However, it's used in many icon fonts, and in some major websites.) Since you need to be able to dynamically place the content in the HTML, we can use the i as a wrap, and a div inside to make the second color.

Code

Working Fiddle

HTML:

<i>Top<div>Bottom</div></i>

CSS:

i {
    height:32px;
    width:32px;
    display:inline-block;
    position:relative;
    color:white;
    font-size:10px;
    background:lightgreen;
    text-align:center;
    font-style:normal;
}
i div {
    background:orange;
    position:absolute;
    bottom:0;
    height:50%;
    width:100%;
}

Screenshot

Answer 2

You may need to alter the below to match your requirements better, but it should give you a decent starting point:

Sample Fiddle

HTML

<i></i>

CSS

i {
    height:32px;
    width:32px;
    display:inline-block;
    position:relative;
    color:white;
    font-size:10px;
}
i:before, i:after {
    display:block;
    height:16px;
    width:32px;
    text-align:center;
    padding-top:2px;
    overflow:hidden;
    box-sizing:border-box;
}
i:before {
    content:'text1';
    background:lightgreen;
}
i:after {
    content:'text2';
    background:orange;
    position:absolute;
    bottom:0;
}