Some weeks ago, I started learning react-materialize, I wanted to create social media icons component using react-materialize but I could not. I search the internet and was able to understand that I can use font awesome with react to create my social media icons. This article will be great for anyone learning how to use react materialize and needs to create social media icons.
To get started:
- Create your react app project using the command below in your terminal.
npx create-react-app my-project
- From your terminal, navigate to the project folder to open your app on the browser by running the command below.
cd my-project
and
npm start
- To use font awesome with react, you will need to install a package called react-font-awesome. The packages are:
@fortawesome/react-fontawesome
@fortawesome/fontawesome-svg-core
@fortawesome/free-brands-svg-icons
To install the packages, navigate to your terminal, and run the command below to install the packages in your project folder.
npm install --save @fortawesome/react-fontawesome @fortawesome/fontawesome svg-core @fortawesome/free-brands-svg-icons
- After successful installation of the packages, the dependencies will appear inside your package.json file as shown below:
package.json file
5. "dependencies": {
6. "@fortawesome/fontawesome-svg-core": "^1.2.32",
7. "@fortawesome/free-brands-svg-icons": "^5.15.1",
8. "@fortawesome/react-fontawesome": "^0.1.12",
9. "@testing-library/jest-dom": "^4.2.4",
10. "@testing-library/react": "^9.3.2",
11. "@testing-library/user-event": "^7.1.2",
12. "firebase": "^8.0.2",
13. "materialize-css": "^1.0.0-rc.2",
14. "react": "^16.14.0",
15. "react-dom": "^16.14.0",
16. "react-materialize": "^3.9.3",
17. "react-router-dom": "^5.2.0",
18. "react-scripts": "3.4.3"
19. },
Inside your src folder, create a folder called SocialMedia, after that, create a new file named SocialMedia.js inside the SocialMedia folder.
Create a SocialMedia component inside the SocialMedia.js file as shown below.
SocialMedia.js file
const SocialMedia=()=> {
return (
<div>
</div>
)
}
export default SocialMedia
- To display the component, you will need to import the SocialMedia component to where you want it to display. In this project, your social media icons will display on the footer section of the page, which means you will import the SocialMedia component to your FooterSection.js file as shown below
FooterSection.js File
import React from 'react';
import {Footer} from "react-materialize";
import SocialMedia from '../SocialMedia/SocialMedia';
const FooterSection =()=> {
return (
<Footer
className="example"
copyrights="© 2020 TuChit"
links={<ul>
<li>
<a className="grey-text text-lighten-3" href="/">
Home
</a>
</li>
<li>
<a className="grey-text text-lighten-3" href="#about">
About
</a>
</li>
<li>
<a className="grey-text text-lighten-3" href="#testimonial">
Testimonial
</a>
</li>
<li>
<a className="grey-text text-lighten-3" href="#feature">
Feature
</a>
</li>
</ul>}
moreLinks={<a className="grey-text text-lighten-4 right" href="#!"><SocialMedia /></a>}
>
<h5 className="white-text">
Footer Content
</h5>
<p className="grey-text text-lighten-4">
You can use rows and columns here href organize your footer content.
</p>
</Footer>
)
}
export default FooterSection
- After you have successfully imported the component, you need to display the font awesome icon on the footer page by importing the following as shown below to your SocialMedia.js file and create the anchor tags for the media icon as shown below.
SocialMedia.js file
import React from 'react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub, faFacebook, faTwitter, faInstagram, faMedium, faLinkedinIn } from "@fortawesome/free-brands-svg-icons";
const SocialMedia=()=> {
return (
<div>
<a href="https://github.com/fatima" className="github social">
<FontAwesomeIcon icon={faGithub} size="2x" />
</a>
<a href="https://web.facebook.com/fatima" className="facebook social">
<FontAwesomeIcon icon={faFacebook} size="2x" />
</a>
<a href="https://twitter.com/fatima" className="twitter social">
<FontAwesomeIcon icon={faTwitter} size="2x" />
</a>
<a href="https://www.instagram.com/fatima" className="instagram social">
<FontAwesomeIcon icon={faInstagram} size="2x" />
</a>
<a href="https://medium.com/@fatima/" className="medium social">
<FontAwesomeIcon icon={faMedium} size="2x" />
</a>
<a href="https://www.linkedin.com/in/fatima" className="linkedin social">
<FontAwesomeIcon icon={faLinkedinIn} size="2x" />
</a>
</div>
)
}
export default SocialMedia
- On your terminal, type the command
npm start
to start your browser and view your project on the browser page. It will display as shown below on the browser
- It has this background color because we added styling to the footer section from my App.css file. You will notice that the social media icon now display but need some styling which will be added from the App.css file as shown below.
App.css file
a.social {
margin: 0 1rem;
transition: transform 250ms;
display: inline-block;
}
a.social:hover {
transform: translateY(-2px);
}
a.facebook {
color: #4968ad;
}
a.twitter {
color: #49a1eb;
}
a.instagram {
color: purple;
}
a.medium,
a.github {
color: white;
}
- After adding the styling, the social media icon will display as shown below:
- If you are able to follow all the processes listed above and get your social media icon displayed, then you just created social media icons using font awesome with react. You can reuse the social media component in any section of your project because that is the greatness that comes with components in react.
Comments are welcome in the comment section.
Thanks for reading! Let's keep in touch on Twitter !