react-icons/fa#FaFacebook JavaScript Examples
The following examples show how to use
react-icons/fa#FaFacebook.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Footer.js From Cross-woc with MIT License | 6 votes |
|
function Footer() {
//To get ongoing year
const currentYear = new Date().getFullYear();
return (
<div className='Footer text-center' id='contact'>
{/* Contact Us Heading */}
<h1 className="footer-heading">Contact Us</h1>
{/* Social Media Icons */}
<div className="footer-media">
<a className="footer-icon" href="/" target="_blank" title="Facebook"><FaFacebook size="20px" color="purple" /></a>
<a className="footer-icon" href="/" target="_blank" title="Twitter"><FaTwitter size="20px" color="purple" /></a>
<a className="footer-icon" href="/" target="_blank" title="Instagram"><FaInstagram size="20px" color="purple" /></a>
<a className="footer-icon" href="/" target="_blank" title="Linkedin"><FaLinkedinIn size="20px" color="purple" /></a>
<a className="footer-icon" href="/" target="_blank" title="Mail"><FaEnvelope size="20px" color="purple" /></a>
</div>
{/* Copyright Item */}
<div className="footer-copyright-item">
<p>Made with ❤️ by <a className="ieeelink" href="https://ieeedtu.in/" target="_blank" rel="noreferrer"> <span className="span"> IEEE DTU</span></a></p>
</div>
<div className="footer-copyright-item">
<p>© Copyright {currentYear} IEEE DTU. All rights reserved.</p>
</div>
</div>
)
}
Example #2
| Source File: CustomShareBlock.js From tomoblo with MIT License | 6 votes |
|
CustomShareBlock = props => {
const { url, title, siteName } = props;
const shareBlockProps = {
url: url,
button: ShareButtonIconOnly,
buttons: [
{ network: "Twitter", icon: FaTwitter },
{ network: "Facebook", icon: FaFacebook },
{ network: "Linkedin", icon: FaLinkedin },
{ network: "Email", icon: FaEnvelope }
],
text: title,
longtext: siteName
};
return (
<div className="mt-4">
<ShareBlockStandard {...shareBlockProps} />
<p className="text-center">
<i>If you like it, share it!</i>
</p>
</div>
);
}
Example #3
| Source File: CustomShareBlock.js From syntax.rocks with MIT License | 6 votes |
|
CustomShareBlock = props => {
const { url, title, siteName } = props;
const shareBlockProps = {
url: url,
button: ShareButtonIconOnly,
buttons: [
{ network: "Twitter", icon: FaTwitter },
{ network: "Facebook", icon: FaFacebook },
{ network: "Linkedin", icon: FaLinkedin },
{ network: "Email", icon: FaEnvelope }
],
text: title,
longtext: siteName
};
return (
<div className="mt-4">
<ShareBlockStandard {...shareBlockProps} />
<p className="text-center"><i>If you like it, share it!</i></p>
</div>
)
}
Example #4
| Source File: SocialIcons.js From caasy-nextjs-blog-template with MIT License | 6 votes |
|
SocialIcons = () => (
<div className={styling.social}>
<a href={blogConfig.social.youtube} target='_blank' rel='noreferrer' hidden={!blogConfig.social.youtube}>
<FaYoutube />
</a>
<a href={blogConfig.social.linkedin} target='_blank' rel='noreferrer' hidden={!blogConfig.social.linkedin}>
<FaLinkedin />
</a>
<a href={blogConfig.social.dev} target='_blank' rel='noreferrer' hidden={!blogConfig.social.dev}>
<FaDev />
</a>
<a href={blogConfig.social.facebook} target='_blank' rel='noreferrer' hidden={!blogConfig.social.facebook}>
<FaFacebook />
</a>
<a href={blogConfig.social.instagram} target='_blank' rel='noreferrer' hidden={!blogConfig.social.instagram}>
<FaInstagram />
</a>
<a href={blogConfig.social.twitter} target='_blank' rel='noreferrer' hidden={!blogConfig.social.twitter}>
<FaTwitter />
</a>
<a href={blogConfig.social.github} target='_blank' rel='noreferrer' hidden={!blogConfig.social.github}>
<FaGithub />
</a>
</div>
)
Example #5
| Source File: social-icon.js From gatsby-theme-intro with MIT License | 6 votes |
|
SocialIcon = ({ name, ...params }) => {
const icons = {
behance: FaBehance,
dribbble: FaDribbble,
facebook: FaFacebook,
github: FaGithub,
goodreads: FaGoodreadsG,
medium: FaMediumM,
instagram: FaInstagram,
linkedin: FaLinkedinIn,
producthunt: FaProductHunt,
twitter: FaTwitter,
youtube: FaYoutube,
xing: FaXing,
}
const Icon = icons[name]
return Icon ? <Icon {...params} /> : null
}
Example #6
| Source File: NavSocial.js From codeursenseine.com with MIT License | 5 votes |
|
socialLinks = [
{
name: "Twitter",
icon: <FaTwitter />,
link: "http://twitter.com/codeursenseine",
},
{
name: "Youtube",
icon: <FaYoutube />,
link: "https://www.youtube.com/channel/UCWujmG5rANxJI0nHbMFs08w/playlists",
},
{
name: "Twitch",
icon: <FaTwitch />,
link: "https://www.twitch.tv/codeursenseine/",
},
{
name: "GitHub",
icon: <FaGithub />,
link: "https://github.com/CodeursEnSeine/",
},
{
name: "Facebook",
icon: <FaFacebook />,
link: "https://www.facebook.com/codeursenseine",
},
{
name: "Linkedin",
icon: <FaLinkedin />,
link: "https://www.linkedin.com/company/codeurs-en-seine",
},
{
name: "Slack",
icon: <FaSlack />,
link: "https://go.codeursenseine.com/slack",
},
{
name: "Flux RSS",
icon: <FaRss />,
link: "https://www.spreaker.com/show/3365517/episodes/feed",
},
{
name: "Spotify",
icon: <FaSpotify />,
link: "https://open.spotify.com/show/28UM8IYvMF68hMm0IqO0M3",
},
{
name: "iTunes",
icon: <FaItunesNote />,
link:
"https://itunes.apple.com/fr/podcast/codeurs-en-seine/id1454150414?mt=2",
},
]
Example #7
| Source File: Footer.js From Anime-Tracker-Web-App with MIT License | 5 votes |
|
CustomFooter = () => {
return (
<div className={styles.footer}>
<a
href="https://www.facebook.com/mrabdullahch/"
target="_blank"
rel="noopener noreferrer"
>
<span size="30px" className="icon">
<FaFacebook />
</span>
</a>
<a
href="https://www.instagram.com/mrabdullahch/"
target="_blank"
rel="noopener noreferrer"
>
<span className="icon">
<GrInstagram />
</span>
</a>
<a
href="https://www.linkedin.com/in/abdullah-ch/"
target="_blank"
rel="noopener noreferrer"
>
<span className="icon">
<AiFillLinkedin />
</span>
</a>
<a
href="https://github.com/abdullah-ch"
target="_blank"
rel="noopener noreferrer"
>
<span className="icon">
<AiFillGithub />
</span>
</a>
<p className="love">
Made with <FontAwesomeIcon color="red" icon={faHeart} /> by
<span
className={styles.spann}
onClick={() =>
(window.location.href = "https://github.com/abdullah-ch")
}
>
Abdullah Ch
</span>
</p>
</div>
);
}
Example #8
| Source File: Login.js From devagram with GNU General Public License v3.0 | 5 votes |
|
Login = ({ auth: { isAuth, loading, error }, loginUser }) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const onLogin = (e) => {
e.preventDefault();
const formData = {
emailOrUsername: email,
password,
};
loginUser(formData);
resetForm();
};
const resetForm = () => {
setEmail("");
setPassword("");
};
return (
<>
<div className={classes.Login}>
<Title title="Devagram" />
{error && (
<p style={{ color: "red", textAlign: "center" }}> {error} </p>
)}
<form className="form" onSubmit={onLogin}>
{loading ? (
<Loader />
) : (
<Fragment>
<Input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
name="email"
required
aria-labelledby="label-email"
/>
<Input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
name="password"
required
aria-labelledby="label-password"
/>
<Button
type="submit"
btnType="Primary"
disabled={!(email && password)}
>
Login
</Button>
</Fragment>
)}
</form>
<div className="social-logins">
<GoogleAuth />
<Button type="button" btnType="Facebook">
<FaFacebook style={{ marginRight: "0.2rem" }} />
Login with Facebook
</Button>
</div>
</div>
<section className="section-bar">
Create new account ? <Link to="/signup">Signup</Link>
</section>
</>
);
}
Example #9
| Source File: Footer.jsx From gatsby-contentful-portfolio with MIT License | 5 votes |
|
Footer = () => {
const {
site: {
meta: { links },
},
} = useStaticQuery(graphql`
query FooterQuery {
site {
meta: siteMetadata {
links {
facebook
instagram
pinterest
twitter
}
}
}
}
`)
return (
<div className="container py-12 md:flex md:items-center md:justify-between">
<ul className="flex justify-center md:order-2">
<FooterLink href={links.twitter} icon={FaTwitter} label="Twitter" />
<FooterLink href={links.facebook} icon={FaFacebook} label="Facebook" />
<FooterLink
href={links.instagram}
icon={FaInstagram}
label="Instagram"
/>
<FooterLink
href={links.pinterest}
icon={FaPinterest}
label="Pinterest"
/>
</ul>
<div className="mt-8 md:mt-0 md:order-1">
<p className="text-center text-sm md:text-base text-gray-700">
© 2020 John Doe. All rights reserved.
</p>
</div>
</div>
)
}
Example #10
| Source File: social-list.js From ruhulamin.dev with BSD Zero Clause License | 4 votes |
|
SocialList = () => {
return (
<div className='py-3 sm:py-5 md:pt-6 md:pb-12 max-w-3xl'>
<ul
className='grid gap-8'
style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}
>
<li>
<a
className='p-6 border rounded-2xl border-gray-200 transition-all duration-200 hover:border-gray-300 block text-white bg-[#00AFF0] hover:text-gray-100'
href='https://join.skype.com/invite/ph5CQgIdcQC5'
target="_blank" rel="noreferrer"
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-lightBlue-100 text-[#00AFF0] rounded-full p-3'>
<FaSkype />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl font-bold tracking-tight'>
Skype{' '}
<span className='text-gray-50 text-xs'>(ruhulamin3482)</span>
</h2>
Chat with me →
</div>
</div>
</a>
</li>
<li>
<a
className='p-6 border rounded-2xl border-gray-200 transition-all duration-100 hover:border-gray-300 block text-white hover:text-gray-100 bg-[#1DA1F2]'
href='https://twitter.com/developerruhul'
target="_blank" rel="noreferrer"
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-white text-[#1DA1F2] rounded-full p-3'>
<FaTwitter />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl'>Twitter</h2>
Tweet @ me →
</div>
</div>
</a>
</li>
<li>
<a
className='p-6 border rounded-2xl border-gray-200 transition-all duration-200 hover:border-gray-300 block text-white hover:text-gray-100 bg-purple-400'
href='mailto:[email protected]'
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-purple-100 text-purple-500 rounded-full p-3'>
<FaEnvelope />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl font-bold tracking-tight'>Email</h2>
Send me an email →
</div>
</div>
</a>
</li>
<li>
<a
className='p-6 border rounded-2xl border-gray-200 transition-all duration-200 hover:border-gray-300 block text-white hover:text-gray-100 bg-gray-500'
href='https://github.com/developerruhul'
target="_blank" rel="noreferrer"
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-gray-100 text-gray-500 rounded-full p-3'>
<FaGithub />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl font-bold tracking-tight'>GitHub</h2>
Profile on GitHub →
</div>
</div>
</a>
</li>
<li>
<a
className='p-6 border rounded-2xl border-gray-200 transition-all duration-200 hover:border-gray-300 block text-white hover:text-gray-100 bg-pink-400'
href='https://dribbble.com/developerruhul'
target="_blank" rel="noreferrer"
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-pink-100 text-pink-500 rounded-full p-3'>
<FaDribbble />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl font-bold tracking-tight'>Dribbble</h2>
Profile on Dribbble →
</div>
</div>
</a>
</li>
<li>
<a
className='p-6 border rounded-2xl bg-[#0A66C2] border-gray-200 transition-all duration-200 hover:border-gray-300 block text-white hover:text-gray-100 '
href='https://www.linkedin.com/in/developerruhul'
target="_blank" rel="noreferrer"
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-blue-100 text-[#0A66C2] rounded-full p-3'>
<FaLinkedin />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl font-bold tracking-tight'>LinkedIn</h2>
Connect with me →
</div>
</div>
</a>
</li>
<li>
<a
className='p-6 border rounded-2xl bg-[#0676E8] border-gray-200 transition-all duration-200 hover:border-gray-300 block text-white hover:text-gray-100 '
href='https://www.facebook.com/developerruhul'
target="_blank" rel="noreferrer"
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-blue-100 text-[#0676E8] rounded-full p-3'>
<FaFacebook />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl font-bold tracking-tight'>Facebook</h2>
Connect with me →
</div>
</div>
</a>
</li>
</ul>
</div>
);
}
Example #11
| Source File: Layout.jsx From Next.js-Mongodb-Authentication-App with MIT License | 4 votes |
|
export default function Layout({ children }) {
const [user, { mutate }] = useUser();
const [loading, isLoading] = useState(false);
const router = useRouter();
const handleLogout = async () => {
isLoading(true);
await fetch('/api/auth', {
method: 'DELETE',
});
// set the user state to null
mutate(null);
isLoading(false);
router.push('/')
};
return (
<>
<Head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</Head>
<header>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Nextjs Auth</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<Link class="nav-link" href="/"><a style={{ color: '#949585' }}>Home</a></Link>
</li>
<li>
<a class="nav-link" data-bs-toggle="modal" data-bs-target="#exampleModal">
About
</a>
</li>
</ul>
{user && <button className='btn btn-primary' onClick={handleLogout}>Logout</button>}
</div>
</div>
</nav>
</header>
<main className='d-flex justify-content-center align-items-center'>
<div className="container mx-auto my-3 h-100">
<div className="row">
<div className="col-sm-12">
{children}
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">About</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div className='row' style={{ flexDirection: 'column' }}>
<div className='col text-center'>
<img src="/Images/Me.jpg" width="200px" className="rounded mx-auto img-fluid" />
<h2 className='mt-3'>I am Tushar Saxena</h2>
</div>
<div className='col text-center'>
<div className="" style={{ fontSize: '2rem' }}>
<a href="https://github.com/tsaxena4k" target="_blank"><FaGithub /> </a>
<a href="https://www.facebook.com/tushar.saxena.56232/" target="_blank"><FaFacebook /> </a>
<a href="https://www.linkedin.com/in/tushar-saxena-94b742184/" target="_blank"><FaLinkedin /> </a>
<a href="https://www.instagram.com/tsaxena4k/" target="_blank"><FaInstagram /> </a>
</div>
<hr />
<div className="mt-3">
<p><strong>I was just doing Frontend Development a few months ago, was enjoying building personalised UI/UX templates with React and different styling options like materialize css, material UI ,Sass and what not.
Though I was aware that Frontend was just not enough for me I had to start with Backend any day now, but like everyone else struggled with motivation.
<br /><br />For me that day of motivation came in with a college project that a team of three has to work on.As a start I switched to <a href="https://nextjs.org/" target="_blank">Next.js</a> and that was really smooth,
then I worked with nodejs,building API,Mongodb and all that Backend stuff.<br />But I struggled putting all of these things together to build a Login~Signup Authentication for our project.I watched every
single video on youtube for the topic but failed to get things working.This was the start to my backend journey and it was quite what I thought it would be like.
<br /><br />After alot of research and all came to know about <a href="http://www.passportjs.org/">passport.js</a> and here we are with things working. Thanks to <a href="https://hoangvvo.com/" target="_blank">Hoang</a>,his blogs helped me alot and finally
I completed my first backend task.<br />I do realise after all of this that there might be people like me trying hard to make there first Authentication backend to work.
So I decided to put this simple working model up for those who are seeking hard for it.<br /><br />I hope it helped you and I know there are tons of bugs and incomplete parts in the code I'll be working on that,
to know more check out the <a href="https://github.com/tsaxena4k" target="_blank">github repository</a> for the same.</strong></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</main>
<style jsx>{`
.container{
height:85vh;
}
main{
min-height:85vh;
}
`}</style>
</>
);
}
