Better namespacing of sprite CSS classes.

services/web/app/views/layout/footer.jade

@@ -15,7 +15,7 @@ footer.site-footer
 							aria-expanded="false",
 							tooltip="#{translate('language')}"
 						)
-							figure(class="icon icon-lang icon-#{currentLngCode}")
+							figure(class="sprite-icon sprite-icon-lang sprite-icon-#{currentLngCode}")
 
 						ul.dropdown-menu(role="menu")
 							li.dropdown-header #{translate("language")}
@@ -23,7 +23,7 @@ footer.site-footer
 								if !subdomainDetails.hide
 									li.lngOption
 										a.menu-indent(href=subdomainDetails.url+currentUrl)
-											figure(class="icon icon-lang icon-#{subdomainDetails.lngCode}")
+											figure(class="sprite-icon sprite-icon-lang sprite-icon-#{subdomainDetails.lngCode}")
 											|  #{translate(subdomainDetails.lngCode)}
 										//- img(src="/img/flags/24/.png")
 				each item in nav.left_footer

services/web/public/stylesheets/app/sprites.less

@@ -1,104 +1,104 @@
 
-.icon {
+.sprite-icon {
   background-image: url('/img/sprite.png');
 }
 
-.icon-ko {
+.sprite-icon-ko {
   background-position: -0px -0px;
   width: 24px;
   height: 24px;
 }
-.icon-cn {
+.sprite-icon-cn {
   background-position: -0px -24px;
   width: 24px;
   height: 24px;
 }
-.icon-da {
+.sprite-icon-da {
   background-position: -0px -48px;
   width: 24px;
   height: 24px;
 }
-.icon-de {
+.sprite-icon-de {
   background-position: -0px -72px;
   width: 24px;
   height: 24px;
 }
-.icon-en {
+.sprite-icon-en {
   background-position: -0px -96px;
   width: 24px;
   height: 24px;
 }
-.icon-es {
+.sprite-icon-es {
   background-position: -0px -120px;
   width: 24px;
   height: 24px;
 }
-.icon-fi {
+.sprite-icon-fi {
   background-position: -0px -144px;
   width: 24px;
   height: 24px;
 }
-.icon-fr {
+.sprite-icon-fr {
   background-position: -0px -168px;
   width: 24px;
   height: 24px;
 }
-.icon-it {
+.sprite-icon-it {
   background-position: -0px -192px;
   width: 24px;
   height: 24px;
 }
-.icon-ja {
+.sprite-icon-ja {
   background-position: -0px -216px;
   width: 24px;
   height: 24px;
 }
-.icon-cs {
+.sprite-icon-cs {
   background-position: -0px -240px;
   width: 24px;
   height: 24px;
 }
-.icon-nl {
+.sprite-icon-nl {
   background-position: -0px -264px;
   width: 24px;
   height: 24px;
 }
-.icon-no {
+.sprite-icon-no {
   background-position: -0px -288px;
   width: 24px;
   height: 24px;
 }
-.icon-pl {
+.sprite-icon-pl {
   background-position: -0px -312px;
   width: 24px;
   height: 24px;
 }
-.icon-pt {
+.sprite-icon-pt {
   background-position: -0px -336px;
   width: 24px;
   height: 24px;
 }
-.icon-ru {
+.sprite-icon-ru {
   background-position: -0px -360px;
   width: 24px;
   height: 24px;
 }
-.icon-sv {
+.sprite-icon-sv {
   background-position: -0px -384px;
   width: 24px;
   height: 24px;
 }
-.icon-tr {
+.sprite-icon-tr {
   background-position: -0px -408px;
   width: 24px;
   height: 24px;
 }
-.icon-uk {
+.sprite-icon-uk {
   background-position: -0px -432px;
   width: 24px;
   height: 24px;
 }
-.icon-zh-CN {
+.sprite-icon-zh-CN {
   background-position: -0px -456px;
   width: 24px;
   height: 24px;

services/web/public/stylesheets/components/footer.less

@@ -24,7 +24,7 @@ footer.site-footer {
 	}
 }
 
-.icon-lang {
+.sprite-icon-lang {
 	display: inline-block;
 	vertical-align: middle;
 }