Using font awesome for icons

react-rally · May 13, 2016 · dca69d5 · dca69d5
1 parent 404bcea
commit dca69d5
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 14 deletions.
diff --git a/2016/app/components/Avatar.js b/2016/app/components/Avatar.js
@@ -9,8 +9,8 @@ export default (props) => {
       <b>{props.name}</b><br/>
       <em>{props.title}</em>
       <div className="Avatar__Social">
-        <Icon href={props.twitter} src="assets/dist/img/twitter.png" className="Icon--twitter"/>
-        <Icon href={props.github} src="assets/dist/img/github.png" className="Icon--github"/>
+        <Icon href={`https://twitter.com/${props.twitter}`} type="twitter"/>
+        <Icon href={`https://github.com/${props.github}`} type="github"/>
       </div>
     </div>
   )

diff --git a/2016/app/components/Footer.js b/2016/app/components/Footer.js
@@ -40,8 +40,8 @@ export default () => {
         </div>
       </section>
       <div className="Footer__Social">
-        <Icon href="https://twitter.com/ReactRally" src="assets/dist/img/twitter.png" className="Icon--twitter"/>
-        <Icon href="https://github.com/react-rally" src="assets/dist/img/github.png" className="Icon--github"/>
+        <Icon href="https://twitter.com/ReactRally" type="twitter"/>
+        <Icon href="https://github.com/react-rally" type="github"/>
       </div>
       <div className="Footer__Copyright">
         &copy; 2016 Trace Events, LLC

diff --git a/2016/app/components/Icon.js b/2016/app/components/Icon.js
@@ -1,9 +1,10 @@
 import React from 'react'
 
 export default (props) => {
+  console.log(props)
   return (
-    <a href={props.href} target="_blank" className={`Icon ${props.className}`}>
-      <img src={props.src}/>
+    <a href={props.href} target="_blank" className={`Icon Icon--${props.type}`}>
+      <i className={`fa fa-${props.type}`}/>
     </a>
   )
 }
diff --git a/2016/assets/css/styles.scss b/2016/assets/css/styles.scss
@@ -335,21 +335,20 @@ ul.navigation {
   margin: 0 auto 15px;
 }
 .Avatar b {
+  display: inline-block;
   font-size: $size-font-medium;
 }
 .Avatar em {
   color: $color-lightgray;
+  display: inline-block;
   font-size: $size-font-small;
+  height: 45px;
 }
 .Avatar__Social {
   visibility: hidden;
 }
 .Avatar__Social .Icon {
   border-width: 0;
-  padding: 9px;
-}
-.Avatar__Social .Icon--twitter {
-  padding: 11px 10px;
 }
 .Avatar:hover .Avatar__Social {
   visibility: visible;
@@ -385,16 +384,16 @@ ul.navigation {
   background: $fill-white;
   border: 1px solid $fill-darkgray;
   border-radius: 21px;
+  color: $color-lightgray;
   display: inline-block;
-  padding: 8px;
+  font-size: 28px;
   width: 42px;
   height: 42px;
+  text-align: center;
 }
 .Icon:hover {
   background: $fill-orange;
-}
-.Icon--twitter {
-  padding: 8px 9px;
+  color: $color-white;
 }
 
 /* -- Newsletter -- */

diff --git a/2016/assets/dist/img/github.png b/2016/assets/dist/img/github.png
diff --git a/2016/assets/dist/img/twitter.png b/2016/assets/dist/img/twitter.png
diff --git a/2016/assets/img/github.png b/2016/assets/img/github.png
diff --git a/2016/assets/img/twitter.png b/2016/assets/img/twitter.png
diff --git a/2016/index.html b/2016/index.html
@@ -5,6 +5,7 @@
   <meta charset="utf-8"/>
   <meta name="description" content="A community React conference August 25 - 26 2016 in Salt Lake City, UT"/>
   <meta name="keywords" content="React, JS, JavaScript, Conference, Salt Lake City, UT"/>
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/>
 </head>
 <body>
   <div id="container"></div>