@@ -146,8 +146,8 @@

   position: relative;

   top: 2px;

-  &::before {

-    content: '\26AB'

+  &.online, &.away, &.dnd, &.offline {

+    font-size: 11px;

   }

   &.online {

@@ -10,7 +10,7 @@

         %h1 Cinan Rakosnik

         %h2 frontend developer

         %h3

-          %span.status.online

+          %span.status.online.icon-record

           %a{ href: "#"}

             available

             %span.icon-arrow-down.drop-down

@@ -22,7 +22,7 @@

               %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

             %h1

               Adam Wolsky

-              %span.status.online

+              %span.status.online.icon-record

             %h2 co-founder

             %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}

               %span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}

@@ -32,7 +32,7 @@

               %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

             %h1

               John Savage

-              %span.status.away

+              %span.status.away.icon-record

             %h2 web & ui designer

             %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}

               %span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}

@@ -46,7 +46,7 @@

               %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

             %h1

               Ashley Bond

-              %span.status.offline

+              %span.status.offline.icon-record

             %h2 sexretary

             %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}

               -#%span.icon-bubble{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}

@@ -58,7 +58,7 @@

               %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

             %h1

               Bob Awesome

-              %span.status.dnd

+              %span.status.dnd.icon-record

             %h2 sales manager

             %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}

               %span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}

@@ -68,7 +68,7 @@

               %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

             %h1

               Bob Awesome

-              %span.status.dnd

+              %span.status.dnd.icon-record

             %h2 sales manager

             %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}

               %span.icon-bubble{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}

@@ -24,6 +24,7 @@ This is a custom SVG font generated by IcoMoon.

 <glyph unicode="&#x271a;" d="M 512.00,288.00L 320.00,288.00L 320.00,480.00L 192.00,480.00L 192.00,288.00L0.00,288.00L0.00,160.00L 192.00,160.00L 192.00-32.00L 320.00-32.00L 320.00,160.00L 512.00,160.00 	z" data-tags="plus, add" />

 <glyph unicode="&#x25be;" d="M 373.76,326.374L 138.24,326.40L 256.00,121.60 z" data-tags="arrow-down, triangle, down, bottom" />

 <glyph unicode="&#x25b4;" d="M 138.24,121.60L 373.76,121.60L 255.974,326.40 z" data-tags="arrow-up, triangle, up, top" />

+<glyph unicode="&#x25cf;" d="M 256.00,403.20c-98.97,0.00-179.20-80.23-179.20-179.20c0.00-98.97, 80.23-179.20, 179.20-179.20c 98.944,0.00, 179.20,80.23, 179.20,179.20C 435.20,322.97, 354.944,403.20, 256.00,403.20z" data-tags="record, circle, media control" />

 <glyph unicode="&#x20;" horiz-adv-x="256" />

 <glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />

 </font></defs></svg>

\ No newline at end of file

Binary files a/vendor/assets/stylesheets/fonts/icomoon.eot and b/vendor/assets/stylesheets/fonts/icomoon.eot differ

@@ -24,6 +24,7 @@ This is a custom SVG font generated by IcoMoon.

 <glyph unicode="&#x271a;" d="M 512.00,288.00L 320.00,288.00L 320.00,480.00L 192.00,480.00L 192.00,288.00L0.00,288.00L0.00,160.00L 192.00,160.00L 192.00-32.00L 320.00-32.00L 320.00,160.00L 512.00,160.00 	z"  />

 <glyph unicode="&#x25be;" d="M 373.76,326.374L 138.24,326.40L 256.00,121.60 z"  />

 <glyph unicode="&#x25b4;" d="M 138.24,121.60L 373.76,121.60L 255.974,326.40 z"  />

+<glyph unicode="&#x25cf;" d="M 256.00,403.20c-98.97,0.00-179.20-80.23-179.20-179.20c0.00-98.97, 80.23-179.20, 179.20-179.20c 98.944,0.00, 179.20,80.23, 179.20,179.20C 435.20,322.97, 354.944,403.20, 256.00,403.20z"  />

 <glyph unicode="&#x20;" horiz-adv-x="256" />

 <glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />

 </font></defs></svg>

\ No newline at end of file

Binary files a/vendor/assets/stylesheets/fonts/icomoon.ttf and b/vendor/assets/stylesheets/fonts/icomoon.ttf differ

Binary files a/vendor/assets/stylesheets/fonts/icomoon.woff and b/vendor/assets/stylesheets/fonts/icomoon.woff differ

@@ -15,7 +15,7 @@ Instead of a list of all class selectors,

 you can use the generic selector below, but it's slower:

 [class*="icon-"]:before {

 */

-.icon-x:before, .icon-cog:before, .icon-x-full:before, .icon-bubbles:before, .icon-bubble:before, .icon-plus:before, .icon-arrow-down:before, .icon-arrow-up:before {

+.icon-x:before, .icon-cog:before, .icon-x-full:before, .icon-bubbles:before, .icon-bubble:before, .icon-plus:before, .icon-arrow-down:before, .icon-arrow-up:before, .icon-record:before {

 	font-family: 'icomoon';

 	speak: none;

 	font-style: normal;

@@ -49,4 +49,7 @@ you can use the generic selector below, but it's slower:

 }

 .icon-arrow-up:before {

 	content: "\25b4";

+}

+.icon-record:before {

+    content: "\25cf";

 }

\ No newline at end of file