add custom materio icon

sites/all/modules/gui/materiobasemod/materio_user.module

@@ -146,7 +146,7 @@ function materio_user_block_view($delta = '') {
       break;
     case 'front_link':
       $block['subject'] = '';
-      $block['content'] = l('<i class="icon-home"></i><span class="text">'.t('home').'</span>', '<front>', array('html'=>true));
+      $block['content'] = l('<i class="fi-home"></i><span class="text">'.t('home').'</span>', '<front>', array('html'=>true));
       break;
   }
   return $block;

sites/all/themes/gui/materiobasetheme/css/styles.css

@@ -10144,7 +10144,7 @@ html.no-touch #header #header-blocks #block-user-login:hover form#user-login-for
 /* line 347, ../scss/styles.scss */
 #header #header-blocks #block-logintoboggan-logintoboggan-logged-in i {
   vertical-align: text-bottom;
-  margin: 0 2px 1px 0;
+  margin: 0 5px 1px 0;
 }
 /* line 351, ../scss/styles.scss */
 #header #header-blocks #block-logintoboggan-logintoboggan-logged-in a span.account {
@@ -13716,138 +13716,6 @@ div.messages.status {
 /**
 * icons
 */
-/* line 141, ../scss/misc.scss */
-i.icon-materio-viewmode-cardsmall {
-  background-image: url("../img/sprite.png");
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  background-position: -42px 0;
-  background-color: #fff;
-}
-/* line 143, ../scss/misc.scss */
-i.icon-materio-viewmode-cardsmall.active {
-  background-image: url("../img/sprite.png");
-  width: 21px;
-  height: 21px;
-  line-height: 21px;
-  background-position: 0 0;
-  background-color: #fff;
-}
-/* line 144, ../scss/misc.scss */
-i.icon-materio-viewmode-cardsmall:hover:not(.active) {
-  background-image: url("../img/sprite.png");
-  width: 21px;
-  height: 21px;
-  line-height: 21px;
-  background-position: -21px 0;
-  background-color: #fff;
-}
-
-/* line 146, ../scss/misc.scss */
-i.icon-materio-viewmode-cardmedium {
-  background-image: url("../img/sprite.png");
-  width: 21px;
-  height: 21px;
-  line-height: 21px;
-  background-position: -42px -21px;
-  background-color: #fff;
-}
-/* line 148, ../scss/misc.scss */
-i.icon-materio-viewmode-cardmedium.active {
-  background-image: url("../img/sprite.png");
-  width: 21px;
-  height: 21px;
-  line-height: 21px;
-  background-position: 0 -21px;
-  background-color: #fff;
-}
-/* line 149, ../scss/misc.scss */
-i.icon-materio-viewmode-cardmedium:hover:not(.active) {
-  background-image: url("../img/sprite.png");
-  width: 21px;
-  height: 21px;
-  line-height: 21px;
-  background-position: -21px -21px;
-  background-color: #fff;
-}
-
-/* line 151, ../scss/misc.scss */
-i.icon-materio-viewmode-cardbig {
-  background-image: url("../img/sprite.png");
-  width: 21px;
-  height: 21px;
-  line-height: 21px;
-  background-position: -42px -42px;
-  background-color: #fff;
-}
-/* line 153, ../scss/misc.scss */
-i.icon-materio-viewmode-cardbig.active {
-  background-image: url("../img/sprite.png");
-  width: 21px;
-  height: 21px;
-  line-height: 21px;
-  background-position: 0 -42px;
-  background-color: #fff;
-}
-/* line 154, ../scss/misc.scss */
-i.icon-materio-viewmode-cardbig:hover:not(.active) {
-  background-image: url("../img/sprite.png");
-  width: 21px;
-  height: 21px;
-  line-height: 21px;
-  background-position: -21px -42px;
-  background-color: #fff;
-}
-
-/* line 156, ../scss/misc.scss */
-i.icon-materio-viewmode-cardfull {
-  background-image: url("../img/sprite.png");
-  width: 21px;
-  height: 21px;
-  line-height: 21px;
-  background-position: -42px -63px;
-  background-color: #fff;
-}
-/* line 158, ../scss/misc.scss */
-i.icon-materio-viewmode-cardfull.active {
-  background-image: url("../img/sprite.png");
-  width: 21px;
-  height: 21px;
-  line-height: 21px;
-  background-position: 0 -63px;
-  background-color: #fff;
-}
-/* line 159, ../scss/misc.scss */
-i.icon-materio-viewmode-cardfull:hover:not(.active) {
-  background-image: url("../img/sprite.png");
-  width: 21px;
-  height: 21px;
-  line-height: 21px;
-  background-position: -21px -63px;
-  background-color: #fff;
-}
-
-/* line 162, ../scss/misc.scss */
-i.icon-materio-search {
-  background-image: url("../img/sprite.png");
-  width: 21px;
-  height: 21px;
-  line-height: 21px;
-  background-position: -63px -63px;
-  background-color: #fff;
-}
-
-/* line 166, ../scss/misc.scss */
-i.icon-materio-folder {
-  background-image: url("../img/sprite.png");
-  width: 21px;
-  height: 21px;
-  line-height: 21px;
-  background-position: -84px -63px;
-  background-color: #fff;
-}
-
 /**
 * figures
 */

sites/all/themes/gui/materiobasetheme/fonts/icon/foundation-icons.css

@@ -15,6 +15,18 @@
   font-style: normal;
 }
 
+@font-face {
+    font-family: 'foundation-icons-ciconscustom';
+    src: url('foundation-icons-custom.eot');
+    src: url('foundation-icons-custom.eot?#iefix') format('embedded-opentype'),
+         url('foundation-icons-custom.woff') format('woff'),
+         url('foundation-icons-custom.ttf') format('truetype'),
+         url('foundation-icons-custom.svg#foundation-icons-ciconscustom') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
 .fi-address-book:before,
 .fi-alert:before,
 .fi-align-center:before,
@@ -307,9 +319,36 @@
   -webkit-font-smoothing: antialiased;
   display: inline-block;
   text-decoration: inherit;
-  font-size: 14px;
+  font-size: 16px;
 }
 
+/* CUSTOM ICONS */
+.icon-materio-viewmode-cardsmall,
+.icon-materio-viewmode-cardmedium,
+.icon-materio-viewmode-cardbig,
+.icon-materio-viewmode-cardfull,
+.icon-materio-folder {
+  font-family: "foundation-icons-ciconscustom";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  text-decoration: inherit;
+  font-size: 25px;
+  color: #313131;
+}
+
+.icon-materio-folder{
+  color: #007BC2;
+  font-size: 20px;
+
+}
+
+/*FOUNDATION ICONS*/
+
 .fi-address-book:before { content: "\f100"; }
 .fi-alert:before { content: "\f101"; }
 .fi-align-center:before { content: "\f102"; }
@@ -593,3 +632,14 @@
 .fi-yen:before { content: "\f218"; }
 .fi-zoom-in:before { content: "\f219"; }
 .fi-zoom-out:before { content: "\f21a"; }
+
+/*CUSTOM ICONS*/
+.icon-materio-viewmode-cardsmall.active:before{ content: "\f21b"; }
+.icon-materio-viewmode-cardmedium.active:before{ content: "\f21c"; }
+.icon-materio-viewmode-cardbig.active:before{ content: "\f21d"; }
+.icon-materio-viewmode-cardfull.active:before{ content: "\f21e"; }
+.icon-materio-viewmode-cardsmall:before{ content: "\f21f"; }
+.icon-materio-viewmode-cardmedium:before{ content: "\f220"; }
+.icon-materio-viewmode-cardbig:before{ content: "\f221"; }
+.icon-materio-viewmode-cardfull:before{ content: "\f222"; }
+.icon-materio-folder:before{ content: "\f223"; }

sites/all/themes/gui/materiobasetheme/scss/misc.scss

@@ -9,7 +9,7 @@
   -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
-    @include fs12();
+    @include fs12;
 
   &.warning {
     color: #c09853;//#840;
@@ -28,7 +28,7 @@
     color: #468847;//#036;
     background-color: #dff0d8;//#bdf;
     border-color:#d6e9c6;//#ace;
-    @include fs14();
+    @include fs14;
   }
 
 }
@@ -138,34 +138,34 @@ div.messages { @include messages();}
 //   .icon(20px);
 // }
 
-i.icon-materio-viewmode-cardsmall{
-  @include icon(20px, -42px, 0);
-  &.active{@include icon(21px, 0, 0); }
-  &:hover:not(.active){@include icon(21px, -21px, 0); }
-}
-i.icon-materio-viewmode-cardmedium{
-  @include icon(21px, -42px, -21px);
-  &.active{@include icon(21px, 0, -21px); }
-  &:hover:not(.active){@include icon(21px, -21px, -21px); }
-}
-i.icon-materio-viewmode-cardbig{
-  @include icon(21px, -42px, -42px);
-  &.active{@include icon(21px, 0, -42px); }
-  &:hover:not(.active){@include icon(21px, -21px, -42px); }
-}
-i.icon-materio-viewmode-cardfull{
-  @include icon(21px, -42px, -63px);
-  &.active{@include icon(21px, 0, -63px); }
-  &:hover:not(.active){@include icon(21px, -21px, -63px); }
-}
+// i.icon-materio-viewmode-cardsmall{
+//   @include icon(20px, -42px, 0);
+//   &.active{@include icon(21px, 0, 0); }
+//   &:hover:not(.active){@include icon(21px, -21px, 0); }
+// }
+// i.icon-materio-viewmode-cardmedium{
+//   @include icon(21px, -42px, -21px);
+//   &.active{@include icon(21px, 0, -21px); }
+//   &:hover:not(.active){@include icon(21px, -21px, -21px); }
+// }
+// i.icon-materio-viewmode-cardbig{
+//   @include icon(21px, -42px, -42px);
+//   &.active{@include icon(21px, 0, -42px); }
+//   &:hover:not(.active){@include icon(21px, -21px, -42px); }
+// }
+// i.icon-materio-viewmode-cardfull{
+//   @include icon(21px, -42px, -63px);
+//   &.active{@include icon(21px, 0, -63px); }
+//   &:hover:not(.active){@include icon(21px, -21px, -63px); }
+// }
 
-i.icon-materio-search{
-  @include icon(21px, -63px, -63px);
-}
+// i.icon-materio-search{
+//   @include icon(21px, -63px, -63px);
+// }
 
-i.icon-materio-folder{
-  @include icon(21px, -84px, -63px);
-}
+// i.icon-materio-folder{
+//   @include icon(21px, -84px, -63px);
+// }
 
 
 /**

sites/all/themes/gui/materiobasetheme/scss/styles.scss

@@ -346,7 +346,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
       @include fs12;
       i{
         vertical-align: text-bottom;
-        margin: 0 2px 1px 0;
+        margin: 0 5px 1px 0;
       }
       a span.account{text-transform: lowercase;}
       a span.logout{display:none; @include ml(5px); }