CODEWITHSUNDEEP
cssiconsfont-face
Anas R.
Anas R.

Reputation: 367

A Paragraph's Icon Using a Character

I need to set an icon for some type of paragraphs like a note or a warning message. I use @font-face rule and :before pseudo element to use characters as icons, like this:

p.warning:before    {content: '⚠';}

The problem is: how to present/style this icon the right way in the paragraph. I mean in the top of the left/beginning margin? As a solution I used these rules:

p.warning   {display: table;}
p.warning:before    {display: table-cell;}

It works fine in WebKit and Gecko, but not opera. Here's the output:

http://richstyle.org/demo-web.php

Any suggestion please?

Upvotes: 1

Views: 788

Answers (1)

Bojangles
Bojangles

Reputation: 101533

Instead of using the actual character itself, you need to put it's unicode character code in the content property, like this:

p.warning:before { 
    content: "\26A0";
}

The code for the symbol you gave was found here. Do note that some fonts may not support extended unicode characters. For example, doing a quick test on JSFiddle with Chrome on Windows 7 yields a blank rectangle (character not supported). You might want to consider using an image with background-image: url(...) instead, or another character.

Upvotes: 1

Related Questions