CODEWITHSUNDEEP
htmlcsspseudo-element
Boel
Boel

Reputation: 976

How to properly draw an icon through text inside an element?

I have inspected a lot of buttons using a technique where their icon is defined by text through the "before" pseudo-element, something like this:

element:before {
    content: "\e604";
}

That code is suposed to draw a star.

I added that to my code, but the icon is not drawn.

.button {
    text-align: center;
    margin-bottom: 16px;
    margin: 0;
    padding: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23);
    border-radius: 50%;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    display: inline-block;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
    background-color: #00bcd4;
    position: relative;
    height: 56px;
    width: 56px;
    padding: 0;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}
.button:before {
    content:"\e604";
}

http://jsfiddle.net/egeszqw6/

What should I do to make the icon appear?

Thanks in advance!

Upvotes: 4

Views: 1861

Answers (2)

tribe84
tribe84

Reputation: 5622

What is actually showing up is a font. 

 content:"\e604";

The statement above will just render the glyph (or char) that relates to the \e604 unicode.

So, unless you specifically have a font specified and included (Such as glyphicons or font-awesome, used by bootstrap) or a custom font made at sites like icomoon. It will not work. You need to specify the font-face!

Upvotes: 5

Ted
Ted

Reputation: 14927

In your example fiddle, you missed the class on the button. It should be this:

<div class="button admin__add"></div>

Other than that, you need to set the font-family in the .admin__add:before css

I created this fiddle, using font awesome as an example

Upvotes: 1

Related Questions