fix: update spacing of icons in button (#52)

No scss update. Should document this method.

Author: Adam Butterworth

src/pages/Basics.ButtonsAndLinks.js

@@ -59,8 +59,14 @@ export default function ButtonsAndLinks() {
         <h5 className="section">With Icons</h5>
 
         <div className="mb-3">
-          <button type="button" className="mr-2 btn btn-primary btn"><FontAwesomeIcon icon={faCheckCircle} />  Medium</button>
-          <button type="button" className="mr-2 btn btn-primary btn-lg"><FontAwesomeIcon icon={faCheckCircle} />  Large</button>
+          <button type="button" className="mr-2 btn btn-primary btn">
+            <FontAwesomeIcon className="mr-2" icon={faCheckCircle} />
+            Medium
+          </button>
+          <button type="button" className="mr-2 btn btn-primary btn-lg">
+            <FontAwesomeIcon className="mr-2" icon={faCheckCircle} />
+            Large
+          </button>
         </div>
       </div>
 

src/pages/Basics.js

@@ -33,7 +33,7 @@ export default class Basics extends React.Component {
           <div className="mb-5 d-flex align-items-center">
             <span className="mr-5"><a href="#demo">Link</a></span>
             <span className="mr-5"><a href="#demo">Link extension →</a></span>
-            <span className="mr-5"><a href="#demo"><FontAwesomeIcon icon={faCheckCircle} />Link with icon</a></span>
+            <span className="mr-5"><a href="#demo"><FontAwesomeIcon icon={faCheckCircle} className="mr-1" />Link with icon</a></span>
             <span className="mr-5"><a className="btn btn-link" href="#demo">Link with button container</a></span>
           </div>
           <div className="alert alert-info d-flex" role="alert">