Replace custom icons with font awesome

src/index.css

@@ -6,11 +6,6 @@ code { font-size: 1.2em; font-weight: bold; }
 
 .header-cmd { color: #c5c5c5 }
 
-.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }
-.top-links li { float: left; }
-.top-links a { display: inline-block; padding: 10px 15px}
-.top-links .icon { margin-right: 5px; }
-
 .mono { font-family: monospace; font-size: 1.3em }
 .expressionInput { width: 500px; padding: 3px; border: solid 1px lightgray; }
 
@@ -51,19 +46,6 @@ code { font-size: 1.2em; font-weight: bold; }
 
 .cur { color: lightgray; }
 
-.icon { width: 16px; height: 16px; display: inline-block; }
-.light .twitter { background: url('./img/twitter-light.png') }
-.dark .twitter { background: url('./img/twitter-dark.png') }
-.midnight .twitter { background: url('./img/twitter-dark.png') }
-
-.light .feedback { background: url('./img/feedback-light.png') }
-.dark .feedback { background: url('./img/feedback-dark.png') }
-.midnight .feedback { background: url('./img/feedback-dark.png') }
-
-.light .github { background: url('./img/github-light.png') }
-.dark .github { background: url('./img/github-dark.png') }
-.midnight .github { background: url('./img/github-dark.png') }
-
 /* Light */
 .light { background: #fafafa; }
 .light a, .light a:visited { color: #222; }

src/shell/components/AppRoot.tsx

@@ -6,6 +6,8 @@ import cmd from '../cmd';
 import log from 'loglevel';
 import Indicators from './Indicators';
 import hash from '../../core/hash';
+import TopLinks from './TopLinks';
+
 
 type AppRootProps = {
     appState: AppState,    
@@ -51,17 +53,7 @@ export default class AppRoot extends React.Component<AppRootProps, AppRootState>
                     <div className="header">
                         <h1>Bitwise<span className="header-cmd">Cmd</span>
                         </h1>
-                        <ul className="top-links">
-                            <li>
-                                <a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i className="icon github">&nbsp;</i><span className="link-text">Project on GitHub</span></a>
-                            </li>
-                            <li>
-                                <a href="https://twitter.com/BitwiseCmd"><i className="icon twitter">&nbsp;</i><span className="link-text">Twitter</span></a>
-                            </li>
-                            <li>
-                                <a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback"><i className="icon feedback">&nbsp;</i><span className="link-text">Send Feedback</span></a>
-                            </li>
-                        </ul>
+                       <TopLinks />
                     </div>
 
                     <div className="expressionInput-container">

src/shell/components/TopLinks.css

@@ -0,0 +1,5 @@
+
+.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }
+.top-links li { float: left; }
+.top-links a { display: inline-block; padding: 10px 15px}
+.top-links .icon { margin-right: 5px; vertical-align: middle; }

src/shell/components/TopLinks.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
+import { faTwitter, faGithub} from "@fortawesome/free-brands-svg-icons";
+import './TopLinks.css';
+
+function TopLinks() {
+    return <ul className="top-links">                
+                <li>
+                    <a href="https://github.com/BorisLevitskiy/BitwiseCmd"><FontAwesomeIcon className="icon" icon={faGithub} size="lg" />Project on GitHub</a>
+                </li>
+                <li>
+                    <a href="https://twitter.com/BitwiseCmd"><FontAwesomeIcon className="icon" icon={faTwitter} size="lg" /><span className="link-text">Twitter</span></a>
+                </li>
+                <li>
+                    <a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback"><FontAwesomeIcon className="icon" icon={faEnvelope} size="lg" /><span className="link-text">Send Feedback</span></a>
+                </li>
+    </ul>;
+}
+
+export default TopLinks;