Icon buttons with text

samples/buttons.php

@@ -18,16 +18,14 @@
  * .bx-btn - standard button
  * .bx-btn .bx-btn-small - small buttom 
  * 
- * To make button with icon only include icon in 'i' tag:
+ * To make button with font icon, add icon before text and wrap text in 'u' tag:
  * @code
- *   <i class="sys-icon fire-extinguisher"></i>
- *   <i style="background-image:url(clock.png)"></i>
+ *   <i class="sys-icon fire-extinguisher"></i><u>Button text</u>
  * @endcode
  *
- * To make button with icon and text wrap it in 'u' tag:
+ * To make button with image, add 'img' tag before text and wrap text in 'u' tag:
  * @code
- *   <u class="sys-icon fire-extinguisher">Button text</u>
- *   <u style="background-image:url(clock.png)">Button text</u>
+ *   <img src="clock.png" /><u>Button text</u>
  * @endcode
  */ 
 
@@ -54,26 +52,26 @@ function PageCompMainCode() {
     ob_start();
 ?>
     <button class="bx-btn bx-def-margin-right">Button text</button>
-    <button class="bx-btn bx-btn-img bx-def-margin-right"><i style="background-image:url(template/images/icons/clock.png)"></i></button>
-    <button class="bx-btn bx-btn-img bx-def-margin-right"><u style="background-image:url(template/images/icons/clock.png)">Button text</u></button>
+    <button class="bx-btn bx-btn-img bx-def-margin-right"><img src="template/images/icons/clock.png" /></button>
+    <button class="bx-btn bx-btn-img bx-def-margin-right"><img src="template/images/icons/clock.png"><u>Button text</u></button>
 
     <div class="bx-clear"></div><hr class="bx-def-hr bx-def-margin-topbottom" />
 
     <button class="bx-btn bx-btn-small bx-def-margin-right">Button text</button>
-    <button class="bx-btn bx-btn-small bx-btn-img bx-def-margin-right"><i style="background-image:url(template/images/icons/clock.png)"></i></button>
-    <button class="bx-btn bx-btn-small bx-btn-img bx-def-margin-right"><u style="background-image:url(template/images/icons/clock.png)">Button text</u></button>
+    <button class="bx-btn bx-btn-small bx-btn-img bx-def-margin-right"><img src="template/images/icons/clock.png" /></button>
+    <button class="bx-btn bx-btn-small bx-btn-img bx-def-margin-right"><img src="template/images/icons/clock.png" /><u>Button text</u></button>
 
     <div class="bx-clear"></div><hr class="bx-def-hr bx-def-margin-topbottom" />
 
     <button class="bx-btn bx-def-margin-right"><i class="sys-icon fire-extinguisher"></i></button>
     <button class="bx-btn bx-def-margin-right"><i class="sys-icon fire-extinguisher sys-icon-bigger"></i></button>
     <button class="bx-btn bx-def-margin-right"><i class="sys-icon fire-extinguisher sys-icon-bigger col-red1"></i></button>
-    <button class="bx-btn bx-def-margin-right"><u class="sys-icon fire-extinguisher">Button text</u></button>
+    <button class="bx-btn bx-def-margin-right"><i class="sys-icon fire-extinguisher"></i><u>Button text</u></button>
 
     <div class="bx-clear"></div><hr class="bx-def-hr bx-def-margin-topbottom" />
 
     <button class="bx-btn bx-btn-small bx-def-margin-right"><i class="sys-icon fire-extinguisher"></i></button>
-    <button class="bx-btn bx-btn-small bx-def-margin-right"><u class="sys-icon fire-extinguisher">Button text</u></button>
+    <button class="bx-btn bx-btn-small bx-def-margin-right"><i class="sys-icon fire-extinguisher"></i><u>Button text</u></button>
 
 <?php
 

template/css/common.css

@@ -249,15 +249,19 @@ blockquote {
 .bx-btn:first-child {
     margin-left:0;
 }
-.bx-btn i {
-    display:block;
-    min-width:16px;
-    min-height:16px;
-	font-style:normal;	
-    background-repeat:no-repeat;
-    background-position:0px 0px;
+.bx-btn img,
+.bx-btn i.sys-icon {
+    margin-right:3px;
+    vertical-align:middle;
+}
+.bx-btn img {
+    width:16px;
+    height:16px;
+}
+.bx-btn u {
+    text-decoration:none;
+    vertical-align:middle;
 }
-
 .bx-btn .sys-icon {
     vertical-align:middle;
     font-size:16px;
@@ -266,23 +270,6 @@ blockquote {
     font-size:20px;
 }
 
-.bx-btn u {
-    display:block;
-    min-width:16px;
-    min-height:16px;
-    padding-left:20px;
-    text-decoration:none;
-    background-repeat:no-repeat;
-    background-position:0px center;
-}
-
-.bx-btn u.sys-icon {
-    padding-left:0px;
-}
-
-.bx-btn u.sys-icon:before {
-    margin-right:8px;
-}
 
 button.bx-btn,
 input.bx-btn {