Getting crazy - Dashboard Theme

Vaadin 6 / 7 / 8
1

Hi, I’m trying to understand the dashboard demo theme.

I have no knowledge about sass… this can be the source of my problem…

I loved the sidebar, and I trying to understand from where the icons (dashboard, sales, reports, transactions, schedules) comes…
I did not found any image… this is getting me crazy!!!

2

After 3 hours, I found it!!!

It is a special character of the font “fontello.ttf”…

Using a font viewer (http://www.fontviewer.de) I found the special characters.

This is the example what I used to find “the secret” (you will need to have the font FONTELLO installed):


<html>
<head>
<style>
.email:before {
   font-family: "fontello";
   font-size: 20;
   content: "\2709";
   margin-right: 4px;
}
</style>
</head>
<body>
  <button class="email">Send email</button>
</body>
</html>
3

Dashboard Theme is using CSS
content
 and properly font “hash-code”

Look here to more info:

http://css-tricks.com/circular-3d-buttons/