diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
index 5143b4793..5c96693d7 100644
--- a/src/components/FeatherIcon.js
+++ b/src/components/FeatherIcon.js
@@ -19,12 +19,21 @@ const FeatherIcon = ({ className, name, size = '1em' }) => {
};
const ICONS = {
+ edit: (
+ <>
+
+
+ >
+ ),
copy: (
<>
>
),
+ github: (
+
+ ),
};
FeatherIcon.propTypes = {
diff --git a/src/components/Footer.js b/src/components/Footer.js
index cabc72864..ca2de7ca1 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -3,6 +3,7 @@ import { Link } from 'gatsby';
import cx from 'classnames';
import ExternalLink from './ExternalLink';
import styles from './Footer.module.scss';
+import FeatherIcon from './FeatherIcon';
import Logo from './Logo';
const Footer = () => (
@@ -22,13 +23,12 @@ const Footer = () => (
-
+
+
Edit this page
-
+
+
Create an issue
diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss
index b2f52b286..38535c9da 100644
--- a/src/components/Footer.module.scss
+++ b/src/components/Footer.module.scss
@@ -30,7 +30,7 @@
.copyright {
margin-left: 1rem;
- padding: 0.75rem 0.5rem;
+ padding-left: 1rem;
border-left: 1px dotted var(--color-neutrals-700);
@media (max-width: 760px) {
@@ -45,28 +45,16 @@
a {
color: var(--color-teal-300);
- margin-left: 1rem;
- padding: 0.2rem;
padding-right: 0;
display: flex;
align-items: center;
- &:before {
- content: '';
- display: inline-block;
- height: 1rem;
- width: 1rem;
- background-repeat: no-repeat;
- background-position: center center;
- margin-right: 0.5rem;
+ &:not(:first-child) {
+ margin-left: 1rem;
}
}
}
-.edit:before {
- background-image: url('../images/edit.svg');
-}
-
-.issue:before {
- background-image: url('../images/github.svg');
+.linkIcon {
+ margin-right: 0.5rem;
}