quran#341 including font-awesome, simplified scss file

src/components/Share/index.js

@@ -1,6 +1,5 @@
 import React, { Component, PropTypes } from 'react';
 const Style = require('./style.scss');
-
 export default class Share extends Component {
 
 
@@ -24,15 +23,15 @@ export default class Share extends Component {
 
         <i
           onClick={() => this.onClickPopup(`https://www.facebook.com/sharer/sharer.php?u=${surahUrl}`, 'Facebook')}
-          className={Style.facebook}
+          className={`fa fa-facebook ${Style.icon}`}
           data-metrics-event-name="Share:Facebook"
           title="Share on Facebook"
         >
         </i>
 
         <i
           onClick={() => this.onClickPopup(`https://twitter.com/intent/tweet?url=${surahUrl}&text=Surat ${name.simple}`, 'Twitter')}
-          className={Style.twitter}
+          className={`fa fa-twitter ${Style.icon}`}
           data-metrics-event-name="Share:Twitter"
           title="Share on Twitter"
         >

src/components/Share/style.scss

@@ -1,30 +1,15 @@
+@import '../../styles/variables';
+
 .share {
-  position: relative;
-  bottom: 2px;
-  left: 5px;
+  font-family: $font-awesome;
+  font-size: 20px;
 }
 
-.facebook {
-  background-image: url(../../../static/images/FB-grn.png);
-  background-repeat: no-repeat;
-  padding-right: 30px;
-  background-size: 12px;
-  padding-bottom: 10px;
-  padding-top: 1px;
-
+.icon {
+  color: $brand-primary;
+  padding-right: 20px;
   &:hover {
-    background-image: url(../../../static/images/FB-beige.png);
+    color: $beige;
   }
 }
 
-.twitter {
-  background-image: url(../../../static/images/Twitter-grn.png);
-  background-repeat: no-repeat;
-  padding-right: 30px;
-  background-size: 21px;
-  padding-bottom: 10px;
-
-  &:hover {
-    background-image: url(../../../static/images/Twitter-beige.png);
-  }
-}