Changed notification menu style

build/less/dropdown.less

@@ -84,7 +84,7 @@
       border-bottom: 1px solid #f4f4f4;
       // Hove state
       &:hover {
-        background: #f6f6f6;
+        background: #f4f4f4;
         text-decoration: none;
       }
     }
@@ -95,36 +95,17 @@
 .navbar-nav > .notifications-menu {
   > .dropdown-menu > li .menu {
     // Links inside the menu
-    > li > a {
-      font-size: 12px;
+    > li > a {      
       color: #444444;
-
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 10px;
       // Icons inside the menu
       > .glyphicon,
       > .fa,
       > .ion {
-        font-size: 20px;
-        width: 50px;
-        text-align: center;
-        padding: 15px 0px;
-        margin-right: 5px;
-        /* Default background and font colors */
-        background: @aqua;
-        color: #f9f9f9; /* Fallback for browsers that doesn't support rgba */
-        color: rgba(255, 255, 255, 0.7);
-        // Icon background variations
-        &.danger {
-          background: @red;
-        }
-        &.warning {
-          background: @yellow;
-        }
-        &.success {
-          background: @green;
-        }
-        &.info {
-          background: @aqua;
-        }
+        width: 20px;
       }
     }
 
@@ -138,8 +119,8 @@
     // Messages menu item
     > li > a {
       margin: 0px;
-      line-height: 20px;
-      padding: 10px 5px 10px 5px;
+      //line-height: 20px;
+      padding: 10px 10px;
       // User image
       > div > img {
         margin: auto 10px auto auto;
@@ -152,11 +133,14 @@
         margin: 0 0 0 45px;
         color: #444444;
         font-size: 15px;
+        position: relative;
         // Small for message time display
         > small {
           color: #999999;
           font-size: 10px;
-          float: right;
+          position: absolute;
+          top: 0px;
+          right: 0px;
         }
       }
 

dist/css/AdminLTE.css

@@ -627,51 +627,24 @@ a:focus {
 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover,
 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover,
 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
-  background: #f6f6f6;
+  background: #f4f4f4;
   text-decoration: none;
 }
 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
-  font-size: 12px;
   color: #444444;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 10px;
 }
 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon,
 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa,
 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion {
-  font-size: 20px;
-  width: 50px;
-  text-align: center;
-  padding: 15px 0px;
-  margin-right: 5px;
-  /* Default background and font colors */
-  background: #00c0ef;
-  color: #f9f9f9;
-  /* Fallback for browsers that doesn't support rgba */
-  color: rgba(255, 255, 255, 0.7);
-}
-.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.danger,
-.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.danger,
-.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.danger {
-  background: #dd4b39;
-}
-.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.warning,
-.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.warning,
-.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.warning {
-  background: #f39c12;
-}
-.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.success,
-.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.success,
-.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.success {
-  background: #00a65a;
-}
-.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.info,
-.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.info,
-.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.info {
-  background: #00c0ef;
+  width: 20px;
 }
 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a {
   margin: 0px;
-  line-height: 20px;
-  padding: 10px 5px 10px 5px;
+  padding: 10px 10px;
 }
 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > img {
   margin: auto 10px auto auto;
@@ -683,11 +656,14 @@ a:focus {
   margin: 0 0 0 45px;
   color: #444444;
   font-size: 15px;
+  position: relative;
 }
 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 > small {
   color: #999999;
   font-size: 10px;
-  float: right;
+  position: absolute;
+  top: 0px;
+  right: 0px;
 }
 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
   margin: 0 0 0 45px;

documentation/index.html

@@ -513,7 +513,7 @@ AdminLTE/
                               <ul class="menu">
                                 <li>
                                   <a href="#">
-                                    <i class="ion ion-ios-people info"></i> 5 new members joined today
+                                    <i class="fa fa-users text-aqua"></i> 5 new members joined today
                                   </a>
                                 </li>
                               </ul>

index.html

@@ -138,28 +138,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

index2.html

@@ -131,28 +131,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/UI/buttons.html

@@ -126,28 +126,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/UI/general.html

@@ -143,28 +143,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/UI/icons.html

@@ -172,28 +172,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/UI/modals.html

@@ -140,28 +140,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/UI/sliders.html

@@ -132,28 +132,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/UI/timeline.html

@@ -126,28 +126,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/calendar.html

@@ -129,28 +129,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/charts/flot.html

@@ -126,28 +126,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/charts/inline.html

@@ -126,28 +126,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/charts/morris.html

@@ -128,28 +128,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/examples/404.html

@@ -126,28 +126,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/examples/500.html

@@ -126,28 +126,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/examples/blank.html

@@ -79,7 +79,7 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                     </ul>

pages/examples/invoice.html

@@ -126,28 +126,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/forms/advanced.html

@@ -136,28 +136,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/forms/editors.html

@@ -128,28 +128,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/forms/general.html

@@ -126,28 +126,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/layout/boxed.html

@@ -80,7 +80,7 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                     </ul>

pages/layout/fixed.html

@@ -80,7 +80,7 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                     </ul>

pages/mailbox.html

@@ -130,28 +130,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/tables/data.html

@@ -128,28 +128,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/tables/simple.html

@@ -126,28 +126,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-red"></i> You changed your username
                         </a>
                       </li>
                     </ul>

pages/widgets.html

@@ -126,28 +126,28 @@
                     <ul class="menu">
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-people info"></i> 5 new members joined today
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="fa fa-users warning"></i> 5 new members joined
+                          <i class="fa fa-users text-red"></i> 5 new members joined
                         </a>
                       </li>
 
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-cart success"></i> 25 sales made
+                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                         </a>
                       </li>
                       <li>
                         <a href="#">
-                          <i class="ion ion-ios-person danger"></i> You changed your username
+                          <i class="fa fa-user text-light-blue"></i> You changed your username
                         </a>
                       </li>
                     </ul>