react-icons/fa#FaLinkedinIn JavaScript Examples
The following examples show how to use
react-icons/fa#FaLinkedinIn.
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: 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 #3
| Source File: SocialLinks.js From utahjs-gatsby with BSD Zero Clause License | 5 votes |
|
SocialLinks = ({ link }) => {
// state/functions for icon hover effect
const [animationState, setAnimationState] = useState(false);
const hoverHandler = () => {
setAnimationState(true);
};
const hoverExitHandler = () => {
setAnimationState(false);
};
let twitter;
let linkedIn;
if (link.title === 'Twitter') {
twitter = (
<a href={link.url}>
<div
onMouseEnter={hoverHandler}
onMouseLeave={hoverExitHandler}
className={!animationState ? 'wrapper' : 'wrapper hover'}
>
<FaTwitter className="socialLink" />
</div>
</a>
);
}
if (link.title === 'LinkedIn') {
linkedIn = (
<a href={link.url}>
<div
onMouseEnter={() => hoverHandler()}
onMouseLeave={() => hoverExitHandler()}
className={!animationState ? 'wrapper' : 'wrapper hover'}
>
<FaLinkedinIn className="socialLink" />
</div>
</a>
);
}
return (
<SocialWrapper>
{twitter}
{linkedIn}
</SocialWrapper>
);
}
Example #4
| Source File: Footer.js From dscmec-website with MIT License | 5 votes |
|
function Footer() {
return (
<div className="footer">
<img className="footer-background" src={footerBackground} alt="" />
<div className="footer-container">
<div className="footer-icons">
<a
href="https://www.instagram.com/dscmec/"
target="_blank"
rel="noreferrer noopener"
>
<FaInstagram className="f-icon" />
</a>
<a
href="https://www.youtube.com/channel/UC3sLPfRwlw6ytRtYT91XKWQ/featured"
target="_blank"
rel="noreferrer noopener"
>
<FaYoutube className="f-icon" />
</a>
<a
href="https://twitter.com/dsc_mec"
target="_blank"
rel="noreferrer noopener"
>
<FaTwitter className="f-icon" />
</a>
<a
href="https://www.linkedin.com/showcase/dscmec/"
target="_blank"
rel="noreferrer noopener"
>
<FaLinkedinIn className="f-icon" />
</a>
</div>
<div className="footer-copyright">
©
<div>
<img src={logo} className="footer-logo" alt="" />
</div>
Developer Student Clubs MEC {new Date().getFullYear()}
</div>
</div>
</div>
);
}
Example #5
| Source File: Home.jsx From CodeSignal-Practice_Solutions with MIT License | 5 votes |
|
export default function Home() {
const icons = [
{
href: "https://www.linkedin.com/in/sagnik-ghosh-564574199",
icon: <FaLinkedinIn />,
},
{
href: "https://github.com/sagnikghoshcr7",
icon: <FaGithub />,
},
{
href: "https://twitter.com/sagnikghoshcr7",
icon: <FaTwitter />,
},
{
href: "https://www.facebook.com/profile.php?id=100036939404474",
icon: <FaFacebookF />,
},
{
href: "https://www.instagram.com/sagnikghoshcr7",
icon: <FaInstagram />,
},
]
return (
<Section id="about">
<div className='row justify-content-between'>
<div className='col-md-6 order-last order-lg-first' data-aos='fade-up'>
<h1 className="mb-0">
Sagnik
<span className="text-primary" style={{paddingLeft: '2vw'}}>Ghosh</span>
</h1>
<div className="subheading mb-3">
<span style={{paddingRight: '0.3vw'}}>
Impossible is nothing!
</span>
<span style={{paddingRight: '0.3vw'}}>
·
</span>
<a href="mailto:[email protected]" className='home-mail'>
[email protected]
</a>
</div>
</div>
<div className='col-md-3 mb-5 mb-lg-0' data-aos='fade-up'>
<img
src={SGCartoon}
alt="Sagnik Cartoon"
style={{height: '40vh', width: '40vh'}}
/>
</div>
</div>
<p className="lead mb-4">
I am a third-year undergraduate Information Technology Student at KIIT University. I am amongst the top contributors in Github from India. I am an Full-Stack Intern at Kaglorsys & Flutter Developer Intern at Skillablers, presently leading the Microsoft Student Ambassadors Community KIIT. I am a Machine Learning Enthusiast also. My other interests are DevOps and UI/UX.
</p>
<div className="btn-group mb-5">
<button
className="btn btn-primary btn-custom py-2 px-5 CV-Button"
type="submit"
onClick={() => window.open(ResumePDF)}
>
Download CV
</button>
</div>
<div className="social-icons">
{icons.map(({ href, icon }, index) => (
<SocialIcon href={href} icon={icon} key={index} />
))}
</div>
</Section>
)
}
Example #6
| 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 #7
| Source File: index.js From layer5-ng with Apache License 2.0 | 4 votes |
|
Footer = () => {
return (
<FotterWrapper>
<img className="section__particle one" alt="img" src={particleOne} alt="appion app landing" />
<Container>
<Row>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets first">
<Link className="footer-logo" to="#">
<img src={logo} alt="logo" />
</Link>
<ul className="info">
<li>
<FiMail />
<Link className="anchor" to="#">
[email protected]
</Link>
</li>
<li>
<FiPhoneCall />
<Link className="anchor" to="#">
+88 12345 697858
</Link>
</li>
</ul>
<ul className="social">
<li>
<Link className="anchor" to="#">
<FaFacebookF />
</Link>
</li>
<li>
<Link className="anchor" to="#">
<FaTwitter />
</Link>
</li>
<li>
<Link className="anchor" to="#">
<FaLinkedinIn />
</Link>
</li>
</ul>
</div>
</Col>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets">
<h3 className="widget-title">Services</h3>
<ul className="widget-catagory">
<li>
<Link className="anchor" to="#">
Web Developments
</Link>
</li>
<li>
<Link className="anchor" to="#">
UX/UI Design
</Link>
</li>
<li>
<Link className="anchor" to="#">
Graphic Design
</Link>
</li>
<li>
<Link className="anchor" to="#">
Software Development
</Link>
</li>
<li>
<Link className="anchor" to="#">
Contact
</Link>
</li>
</ul>
</div>
</Col>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets">
<h3 className="widget-title">About Us</h3>
<ul className="widget-catagory">
<li>
<Link className="anchor" to="#">
About Us
</Link>
</li>
<li>
<Link className="anchor" to="#">
Work Portfolio
</Link>
</li>
<li>
<Link className="anchor" to="#">
Team
</Link>
</li>
<li>
<Link className="anchor" to="#">
Plan & Pricing
</Link>
</li>
<li>
<Link className="anchor" to="#">
Company News
</Link>
</li>
</ul>
</div>
</Col>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets">
<h3 className="widget-title">Our Address</h3>
<p>
1370 Roosevelt Street, <br />
Little York City, New Jersey <br />
08834
</p>
</div>
</Col>
</Row>
<div className="footer-bottom">
<ul className="footer-menu">
<li>
<Link className="anchor" to="#">
Terms
</Link>
</li>
<li>
<Link className="anchor" to="#">
Condition
</Link>
</li>
<li>
<Link className="anchor" to="#">
Contact
</Link>
</li>
<li>
<Link className="anchor" to="#">
Help
</Link>
</li>
</ul>
<p className="copyright-text">
Copyright @
<Link className="anchor" to="#">
Devscorn
</Link>
| All Right Reserved 2020
</p>
</div>
</Container>
</FotterWrapper>
);
}
Example #8
| 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 #9
| Source File: Contacts.js From developer-portfolio with Apache License 2.0 | 4 votes |
|
function Contacts() {
const [open, setOpen] = useState(false);
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [success, setSuccess] = useState(false);
const [errMsg, setErrMsg] = useState('');
const { theme } = useContext(ThemeContext);
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setOpen(false);
};
const useStyles = makeStyles((t) => ({
input: {
border: `4px solid ${theme.primary80}`,
backgroundColor: `${theme.secondary}`,
color: `${theme.tertiary}`,
fontFamily: 'var(--primaryFont)',
fontWeight: 500,
transition: 'border 0.2s ease-in-out',
'&:focus': {
border: `4px solid ${theme.primary600}`,
},
},
message: {
border: `4px solid ${theme.primary80}`,
backgroundColor: `${theme.secondary}`,
color: `${theme.tertiary}`,
fontFamily: 'var(--primaryFont)',
fontWeight: 500,
transition: 'border 0.2s ease-in-out',
'&:focus': {
border: `4px solid ${theme.primary600}`,
},
},
label: {
backgroundColor: `${theme.secondary}`,
color: `${theme.primary}`,
fontFamily: 'var(--primaryFont)',
fontWeight: 600,
fontSize: '0.9rem',
padding: '0 5px',
transform: 'translate(25px,50%)',
display: 'inline-flex',
},
socialIcon: {
width: '45px',
height: '45px',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '21px',
backgroundColor: theme.primary,
color: theme.secondary,
transition: '250ms ease-in-out',
'&:hover': {
transform: 'scale(1.1)',
color: theme.secondary,
backgroundColor: theme.tertiary,
},
},
detailsIcon: {
backgroundColor: theme.primary,
color: theme.secondary,
borderRadius: '50%',
width: '45px',
height: '45px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '23px',
transition: '250ms ease-in-out',
flexShrink: 0,
'&:hover': {
transform: 'scale(1.1)',
color: theme.secondary,
backgroundColor: theme.tertiary,
},
},
submitBtn: {
backgroundColor: theme.primary,
color: theme.secondary,
transition: '250ms ease-in-out',
'&:hover': {
transform: 'scale(1.08)',
color: theme.secondary,
backgroundColor: theme.tertiary,
},
},
}));
const classes = useStyles();
const handleContactForm = (e) => {
e.preventDefault();
if (name && email && message) {
if (isEmail(email)) {
const responseData = {
name: name,
email: email,
message: message,
};
axios.post(contactsData.sheetAPI, responseData).then((res) => {
console.log('success');
setSuccess(true);
setErrMsg('');
setName('');
setEmail('');
setMessage('');
setOpen(false);
});
} else {
setErrMsg('Invalid email');
setOpen(true);
}
} else {
setErrMsg('Enter all the fields');
setOpen(true);
}
};
return (
<div
className='contacts'
id='contacts'
style={{ backgroundColor: theme.secondary }}
>
<div className='contacts--container'>
<h1 style={{ color: theme.primary }}>Contacts</h1>
<div className='contacts-body'>
<div className='contacts-form'>
<form onSubmit={handleContactForm}>
<div className='input-container'>
<label htmlFor='Name' className={classes.label}>
Name
</label>
<input
placeholder='John Doe'
value={name}
onChange={(e) => setName(e.target.value)}
type='text'
name='Name'
className={`form-input ${classes.input}`}
/>
</div>
<div className='input-container'>
<label
htmlFor='Email'
className={classes.label}
>
Email
</label>
<input
placeholder='[email protected]'
value={email}
onChange={(e) => setEmail(e.target.value)}
type='email'
name='Email'
className={`form-input ${classes.input}`}
/>
</div>
<div className='input-container'>
<label
htmlFor='Message'
className={classes.label}
>
Message
</label>
<textarea
placeholder='Type your message....'
value={message}
onChange={(e) => setMessage(e.target.value)}
type='text'
name='Message'
className={`form-message ${classes.message}`}
/>
</div>
<div className='submit-btn'>
<button
type='submit'
className={classes.submitBtn}
>
<p>{!success ? 'Send' : 'Sent'}</p>
<div className='submit-icon'>
<AiOutlineSend
className='send-icon'
style={{
animation: !success
? 'initial'
: 'fly 0.8s linear both',
position: success
? 'absolute'
: 'initial',
}}
/>
<AiOutlineCheckCircle
className='success-icon'
style={{
display: !success
? 'none'
: 'inline-flex',
opacity: !success ? '0' : '1',
}}
/>
</div>
</button>
</div>
</form>
<Snackbar
anchorOrigin={{
vertical: 'top',
horizontal: 'center',
}}
open={open}
autoHideDuration={4000}
onClose={handleClose}
>
<SnackbarContent
action={
<React.Fragment>
<IconButton
size='small'
aria-label='close'
color='inherit'
onClick={handleClose}
>
<CloseIcon fontSize='small' />
</IconButton>
</React.Fragment>
}
style={{
backgroundColor: theme.primary,
color: theme.secondary,
fontFamily: 'var(--primaryFont)',
}}
message={errMsg}
/>
</Snackbar>
</div>
<div className='contacts-details'>
<a
href={`mailto:${contactsData.email}`}
className='personal-details'
>
<div className={classes.detailsIcon}>
<FiAtSign />
</div>
<p style={{ color: theme.tertiary }}>
{contactsData.email}
</p>
</a>
<a
href={`tel:${contactsData.phone}`}
className='personal-details'
>
<div className={classes.detailsIcon}>
<FiPhone />
</div>
<p style={{ color: theme.tertiary }}>
{contactsData.phone}
</p>
</a>
<div className='personal-details'>
<div className={classes.detailsIcon}>
<HiOutlineLocationMarker />
</div>
<p style={{ color: theme.tertiary }}>
{contactsData.address}
</p>
</div>
<div className='socialmedia-icons'>
{socialsData.twitter && (
<a
href={socialsData.twitter}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaTwitter aria-label='Twitter' />
</a>
)}
{socialsData.github && (
<a
href={socialsData.github}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaGithub aria-label='GitHub' />
</a>
)}
{socialsData.linkedIn && (
<a
href={socialsData.linkedIn}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaLinkedinIn aria-label='LinkedIn' />
</a>
)}
{socialsData.instagram && (
<a
href={socialsData.instagram}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaInstagram aria-label='Instagram' />
</a>
)}
{socialsData.medium && (
<a
href={socialsData.medium}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaMediumM aria-label='Medium' />
</a>
)}
{socialsData.blogger && (
<a
href={socialsData.blogger}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaBloggerB aria-label='Blogger' />
</a>
)}
{socialsData.youtube && (
<a
href={socialsData.youtube}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaYoutube aria-label='YouTube' />
</a>
)}
{socialsData.reddit && (
<a
href={socialsData.reddit}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaRedditAlien aria-label='Reddit' />
</a>
)}
{socialsData.stackOverflow && (
<a
href={socialsData.stackOverflow}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaStackOverflow aria-label='Stack Overflow' />
</a>
)}
{socialsData.codepen && (
<a
href={socialsData.codepen}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaCodepen aria-label='CodePen' />
</a>
)}
{socialsData.gitlab && (
<a
href={socialsData.gitlab}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaGitlab aria-label='GitLab' />
</a>
)}
</div>
</div>
</div>
</div>
<img
src={theme.contactsimg}
alt='contacts'
className='contacts--img'
/>
</div>
);
}
