react-icons/fa#FaEnvelope JavaScript Examples
The following examples show how to use
react-icons/fa#FaEnvelope.
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 Winter-of-Code-2.0-frontend with MIT License | 6 votes |
|
Footer = () => {
return (
<footer className="footer">
<div className="contact">
<a href="https://twitter.com/gdsciiitkalyani" target="_blank" rel="noreferrer" className="icon twitter"><FaTwitter size = '5x'/></a>
<a href="https://www.instagram.com/gdsciiitkalyani/" target="_blank" rel="noreferrer" className="icon instagram"><FaInstagram size = '5x'/></a>
<a href="https://www.linkedin.com/company/gdsc-iiit-kalyani/" target="_blank" rel="noreferrer" className="icon linkedin"><FaLinkedin size = '5x'/></a>
<a href="https://mail.google.com/" target="_blank" rel="noreferrer" className="icon email"><FaEnvelope size = '5x'/></a>
<a href="https://github.com/GDSC-IIIT-Kalyani" target="_blank" rel="noreferrer" className="icon github"><FaGithub size='5x'/></a>
</div>
<div className="copyright">
<h2><FaCopyright/> 2021-22 GDSC IIIT Kalyani</h2>
</div>
</footer>
);
}
Example #2
| 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 #3
| Source File: ProfileCard.js From ReactJS-Projects with MIT License | 6 votes |
|
ProfileCard = ({ details }) => {
return (
<Card>
<CardBody className='text-center'>
<img alt="profile_pic" height="150" width="150" className="rounded-circle img-thumbnail border-danger" src={details.picture?.large} />
<CardTitle className='text-primary'>
<h1>
<span>{details.name?.title}. {details.name?.first} {details.name?.last}</span>
</h1>
</CardTitle>
<CardText className='m-3'>
<span><FaMapMarkedAlt /> {details.location?.city}</span>
</CardText>
<CardText className='m-3'>
<span><FaPhone /> {details.phone}</span>
</CardText>
<CardText className='m-3'>
<span><FaEnvelope /> {details.email}</span>
</CardText>
</CardBody>
</Card>
)
}
Example #4
| 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 #5
| 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 #6
| Source File: header.js From gatsby-theme-intro with MIT License | 6 votes |
|
Header = ({ initials }) => (
<header className="flex justify-between p-4 lg:px-8">
<span className="inline-flex w-14 h-14 lg:mt-4 font-header font-bold text-xl justify-center items-center text-center text-front border-2 border-solid border-front rounded-full">
{initials}
</span>
<a
className="flex w-14 h-14 font-header font-semibold px-2 bg-lead rounded-full text-lead-text justify-center items-center leading-tight lg:w-auto lg:h-auto lg:px-6 lg:py-2 lg:rounded-lg lg:self-start lg:mt-4 hover:opacity-75 transition-opacity duration-150"
href="#contact"
>
<FaEnvelope className="inline-block h-6 w-6 lg:hidden" />
<span className="hidden lg:block">Contact me</span>
</a>
</header>
)
Example #7
| Source File: ViewContact.js From ReactJS-Projects with MIT License | 5 votes |
|
ViewContact = () => {
const { state } = useContext(ContactContext);
const { contact } = state;
return (
<Container>
<Row className="mt-5 mb-5">
<Col md="5" className="offset-md-3">
<Card className="pt-3 pb-5">
<CardBody className="text-center ">
<img
height="150"
width="150"
className="cardImg profile border-danger"
src={contact?.picture}
/>
<CardTitle className="text-primary mt-3">
<h1>{contact?.name}</h1>
</CardTitle>
<CardSubtitle>
<h3>
<FaPhone className="mr-2" />
{contact?.phoneNumber}
</h3>
</CardSubtitle>
<a
className="btn btn-primary btn-block"
target="_blank"
href={`mailto:{contact?.email}`}
>
<FaEnvelope className="icon mr-2" />
{contact?.email}
</a>
<a
className="btn btn-primary btn-block"
target="_blank"
href={`https://maps.google.com/?=${contact?.address}`}
>
<FaMapMarkerAlt className="icon mr-2" />
{contact?.address}
</a>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
}
Example #8
| Source File: Footer.jsx From gatsby-airtable-listing with MIT License | 5 votes |
|
Footer = () => {
const {
site: {
meta: { links },
},
} = useStaticQuery(graphql`
query FooterQuery {
site {
meta: siteMetadata {
links {
contact
facebook
linkedin
twitter
}
}
}
}
`)
return (
<footer className="bg-white dark:bg-transparent">
<div className="container pt-12 pb-12 flex flex-wrap text-center lg:flex-row-reverse lg:justify-between lg:items-center">
<ul className="w-full lg:w-auto">
<FooterIconLink
href={links.facebook}
icon={FaFacebookF}
label="Facebook"
/>
<FooterIconLink
href={links.twitter}
icon={FaTwitter}
label="Twitter"
/>
<FooterIconLink
href={links.linkedin}
icon={FaLinkedinIn}
label="LinkedIn"
/>
<FooterIconLink
href={links.contact}
icon={FaEnvelope}
label="E-mail"
/>
</ul>
<div className="w-full lg:w-auto pt-6 lg:pt-0 text-blue-800 dark:text-blue-500 text-sm">
© 2020 All rights reserved.
</div>
</div>
</footer>
)
}
Example #9
| Source File: index.js From layer5-ng with Apache License 2.0 | 4 votes |
|
FooterClassic = () => {
return (
<FotterWrapper>
<img src={FooterBGTwo} alt="img" className="section__particle one" />
<ParticleComponent />
<Container>
<Row>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets first">
<Link to="#" className="footer-logo">
<img src={logo} alt="logo" />
</Link>
<form className="subscribe-form">
<input type="text" placeholder="Search here..." />
<Button>
<FaEnvelope />
</Button>
</form>
</div>
</Col>
<Col xs={12} sm={6} lg={2}>
<div className="footer-widgets">
<h3 className="widget-title">Download</h3>
<ul className="widget-catagory">
<li>
<Link to="#">Company</Link>
</li>
<li>
<Link to="#">Android App</Link>
</li>
<li>
<Link to="#">ios App</Link>
</li>
<li>
<Link to="#">Desktop</Link>
</li>
</ul>
</div>
</Col>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets">
<h3 className="widget-title">Help</h3>
<ul className="widget-catagory">
<li>
<Link to="#">FAQ</Link>
</li>
<li>
<Link to="#">Privecy</Link>
</li>
<li>
<Link to="#">Reporting</Link>
</li>
<li>
<Link to="#">Terms & Condition</Link>
</li>
</ul>
</div>
</Col>
<Col xs={12} sm={6} lg={4}>
<div className="footer-widgets">
<h3 className="widget-title">Follow US</h3>
<ul className="social">
<li>
<Link to="#">
<FaFacebookF />
</Link>
</li>
<li>
<Link to="#">
<FaTwitter />
</Link>
</li>
<li>
<Link to="#">
<FaInstagram />
</Link>
</li>
<li>
<Link to="#">
<FaLinkedinIn />
</Link>
</li>
<li>
<Link to="#">
<FaPinterestP />
</Link>
</li>
</ul>
<p className="copyright-text">
Copyright © 2020 Design By
<Link to="#">Devscorn</Link>
</p>
</div>
</Col>
</Row>
</Container>
</FotterWrapper>
);
}
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>
);
}
