Add icons to social links

package.json

@@ -31,6 +31,7 @@
     "@edx/frontend-component-site-header": "^1.0.1",
     "@edx/paragon": "^3.8.3",
     "@fortawesome/fontawesome-svg-core": "^1.2.14",
+    "@fortawesome/free-brands-svg-icons": "^5.7.2",
     "@fortawesome/free-regular-svg-icons": "^5.7.1",
     "@fortawesome/free-solid-svg-icons": "^5.7.1",
     "@fortawesome/react-fontawesome": "^0.1.4",

src/components/UserProfile/SocialLinks.jsx

@@ -1,12 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTwitter, faFacebook, faLinkedin } from '@fortawesome/free-brands-svg-icons';
 
 import EditControls from './elements/EditControls';
 import EditableItemHeader from './elements/EditableItemHeader';
 import SwitchContent from './elements/SwitchContent';
 import EmptyContent from './elements/EmptyContent';
 
+const brandIcons = {
+  facebook: faFacebook,
+  twitter: faTwitter,
+  linkedin: faLinkedin,
+};
+
 
 class SocialLinks extends React.Component {
   constructor(props) {
@@ -90,7 +98,13 @@ class SocialLinks extends React.Component {
                   <li key={key} className="form-group">
                     {
                       socialLinksObj[key] ? (
-                        <a href={socialLinksObj[key]}>{name}</a>
+                        <a
+                          href={socialLinksObj[key]}
+                          className="font-weight-bold"
+                        >
+                          <FontAwesomeIcon className="mr-2" icon={brandIcons[key]} />
+                          {name}
+                        </a>
                       ) : (
                         <EmptyContent onClick={() => onEdit('socialLinks')}>Add {name}</EmptyContent>
                       )