Fix #479

CHANGELOG.md

@@ -24,6 +24,7 @@
 * Fix #571 control height
 * Fix #634 is-grouped control
 * Fix #676 checkbox/radio wrapping
+* Feature #479 has-icons placement
 
 ## 0.4.0
 

docs/documentation/elements/form.html

@@ -41,9 +41,12 @@ doc-subtab: form
 
 <div class="field">
   <label class="label">Username</label>
-  <p class="control has-icon has-icon-right">
+  <p class="control has-icons-left has-icons-right">
     <input class="input is-success" type="text" placeholder="Text input" value="bulma">
-    <span class="icon is-small">
+    <span class="icon is-small is-left">
+      <i class="fa fa-user"></i>
+    </span>
+    <span class="icon is-small is-right">
       <i class="fa fa-check"></i>
     </span>
   </p>
@@ -52,9 +55,12 @@ doc-subtab: form
 
 <div class="field">
   <label class="label">Email</label>
-  <p class="control has-icon has-icon-right">
+  <p class="control has-icons-left has-icons-right">
     <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
-    <span class="icon is-small">
+    <span class="icon is-small is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-small is-right">
       <i class="fa fa-warning"></i>
     </span>
   </p>
@@ -875,14 +881,20 @@ doc-subtab: form
   </div>
   <div class="field-body">
     <div class="field is-grouped">
-      <p class="control is-expanded">
+      <p class="control is-expanded has-icons-left">
         <input class="input" type="text" placeholder="Name">
+        <span class="icon is-small is-left">
+          <i class="fa fa-user"></i>
+        </span>
       </p>
     </div>
     <div class="field">
-      <p class="control is-expanded has-icon has-icon-right">
+      <p class="control is-expanded has-icons-left has-icons-right">
         <input class="input is-success" type="email" placeholder="Email" value="alex@smith.com">
-        <span class="icon is-small">
+        <span class="icon is-small is-left">
+          <i class="fa fa-envelope"></i>
+        </span>
+        <span class="icon is-small is-right">
           <i class="fa fa-check"></i>
         </span>
       </p>