CODEWITHSUNDEEP
cssicons
Rohit Krishnan
Rohit Krishnan

Reputation: 63

How to show text within icon

I am new to web development (and self taught) so please excuse if this is a dumb question.

How do I show text inside an icon? Such as number inside a heart etc. I assuming for this purpose webfont icon will not work? Is using CSS shapes is better for thus purpose - so that it will render when resized etc? Or is vector better option.

Here is the CSS for heart that I was planning to use. But I am not clear as how to display text inside. 

    .heart {
        position: relative;
        width: 100px;
        height: 90px;
    }
    .heart:before,
    .heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: #fc2e5a;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
           -moz-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
             -o-transform-origin: 0 100%;
                transform-origin: 0 100%;
    }
    .heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
           -moz-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
             -o-transform-origin: 100% 100%;
                trans.orm-origin :100% 100%;
}

Thanks in advance!

Upvotes: 1

Views: 150

Answers (1)

Cody Guldner
Cody Guldner

Reputation: 2886

Here is my solution

I inserted a span between the div tags. That way, like mbratch said, you can set the z-index property as a higher value. This, along with position:absolute, will give you what you are looking for.

I used jQuery to vertically center it, in case you wanted multiple lines of text

Upvotes: 2

Related Questions