CODEWITHSUNDEEP
cssicons
Blu
Blu

Reputation: 4056

icon with custom text like facebook,twitter

I want icons (or some thing that looks like icon) with custom text on it. So far i work this (i am not designer) is there icons available like facebook, twitter but text on it not f but it should be mi etc

Try

HTML

<div class="mainContainer">
    <span>mi</span>
    <span class="split">km</span>
    <span class="split">ft</span>
</div>

CSS

.split
{
    border-left: thin solid #ff0000;
}
.mainContainer
{
    margin:4px;
    padding:4px;
    background-color:ButtonShadow;
    border-radius:10px;
}

but this is too rough

Update i want like that but required mi instead of fb

enter image description here

Upvotes: 0

Views: 170

Answers (2)

Kheema Pandey
Kheema Pandey

Reputation: 10265

do you want the icon should look like this. check the Demo1 and Demo2. 

.mainContainer > span
{
    width: 100px;
    display:block;
    padding:5px;
    position:relative;
    text-indent:-9999px;
}

.mainContainer > span:first-child:before
{
    position:absolute;
    content: "mi";
    color:red;
    top:0;
    left:0;
    padding: 5px;
    background:gold;
    display: block;
    width: auto;
    height: auto;
    font-size:1.5em;
    text-indent:0;
}

Upvotes: 1

WhiteLine
WhiteLine

Reputation: 1991

you mean that you wanted these three icons?

enter image description here

enter image description here

enter image description here

Upvotes: 1

Related Questions