From f359cee2a480aaa75ce16cff530fc401a30df489 Mon Sep 17 00:00:00 2001
From: Adam Butterworth <abutterworth@edx.org>
Date: Fri, 15 Feb 2019 14:48:23 -0500
Subject: [PATCH] Add icons to social links

---
 package.json                               |  1 +
 src/components/UserProfile/SocialLinks.jsx | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 78a35e9..553e0d8 100755
--- a/package.json
+++ b/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",
diff --git a/src/components/UserProfile/SocialLinks.jsx b/src/components/UserProfile/SocialLinks.jsx
index 2752eea..7a87a1b 100644
--- a/src/components/UserProfile/SocialLinks.jsx
+++ b/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>
                       )