0

i'm with some doubts here, i've trying to find a tutorial or example on 'how to' but i can't find any.

I have a good knowledge in css (not professional, but i understand) and when working with some templates or tutorials i've seen some flat icons on the website, when i go to the css class, what i found is something like these: "example:before { content: "\e00a"; }"

I'd like to know how is it done? How can i change it to another icon? Or even, how can i create another 'flat icon' based on the same process?

If anyone can help me, please.

Thanks

celsomtrindade
  • 4,501
  • 18
  • 61
  • 116
  • 1
    Take a look at this question: http://stackoverflow.com/questions/18971474/cannot-view-the-source-image-file-on-a-website – Josh Crozier Mar 13 '14 at 00:56

3 Answers3

1

You can use the content property for icons for example. \e00a for example refers to this character: 

It can be used as the bullet point for list items:

li:before {
    content:'\e00a'
    padding-right:12px;
}

Some fonts come with characters like the ones found here. You can use those characters like \f042 for example to display the screen contrast symbol. however you will need to download the font first to make use of it. Read more about @font-face here

Ibu
  • 42,752
  • 13
  • 76
  • 103
0

Use Predefined CSS files like "fontawsome" or "glyphicons" (Google It). And then use their css class like <i class="fa fa-facebook"></i> this will show facebook icon.

user3314428
  • 13
  • 4
0

You are looking for font icons. This gives you scalable vector icons that can be customized with CSS on size, color, drop-shadow, etc. -- Font Awesome

Here is a great example.

http://fortawesome.github.io/Font-Awesome/icons/

Justin
  • 4,922
  • 2
  • 27
  • 69