react-icons/fa#FaFacebookSquare JavaScript Examples
The following examples show how to use
react-icons/fa#FaFacebookSquare.
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: SocialLinks.js From tomoblo with MIT License | 6 votes |
|
SocialLinks = ({ contacts }) => {
return (
<div className="sidebar-social-links">
<a className="text-secondary p-2"
href={contacts.facebook}>
<span title="Facebook">
<FaFacebookSquare size={26} style={{ color: "secondary" }} />
</span>
</a>
<a className="text-secondary p-2"
href={contacts.github}>
<span title="GitHub">
<FaGithubSquare size={26} style={{ color: "secondary" }} />
</span>
</a>
</div>
)
}
Example #2
| Source File: socialLinks.js From gatsby-strapi-portfolio-site-2020 with MIT License | 6 votes |
|
data = [
{
id: 1,
icon: <FaFacebookSquare className="social-icon"></FaFacebookSquare>,
url: "https://www.twitter.com",
},
{
id: 2,
icon: <FaLinkedin className="social-icon"></FaLinkedin>,
url: "https://www.twitter.com",
},
{
id: 3,
icon: <FaDribbbleSquare className="social-icon"></FaDribbbleSquare>,
url: "https://www.twitter.com",
},
{
id: 4,
icon: <FaBehanceSquare className="social-icon"></FaBehanceSquare>,
url: "https://www.twitter.com",
},
{
id: 5,
icon: <FaTwitterSquare className="social-icon"></FaTwitterSquare>,
url: "https://www.twitter.com",
},
]
Example #3
| Source File: socialLinks.js From starter-project-gatsby-mdx-blog-course-project with MIT License | 6 votes |
|
SocialLinks = ({ styleClass }) => {
return (
<ul className={styleClass}>
<li>
<a href="https://twitter.com">
<FaFacebookSquare className="social-icon facebook-icon"></FaFacebookSquare>
</a>
</li>
<li>
<a href="https://twitter.com">
<FaDribbbleSquare className="social-icon dribble-icon"></FaDribbbleSquare>
</a>
</li>
<li>
<a href="https://twitter.com">
<FaTwitterSquare className="social-icon twitter-icon"></FaTwitterSquare>
</a>
</li>
</ul>
)
}
Example #4
| Source File: index.js From AdaptivApps-fe with MIT License | 5 votes |
|
LandingPage = () => {
const classes = useStyles();
const { loginWithRedirect } = useAuth0();
return (
<IconContext.Provider value={{ color: "white", size: "3rem" }}>
<NavBar />
<Container className={classes.container}>
<div className={classes.box}>
<Typography className={classes.typography}>
Your home for Angel City Sports events and more!
</Typography>
<img
className={classes.bannerImg}
src={landingImage}
alt="Angel City Sports"
/>
</div>
</Container>
<Container className={classes.contentContainer}>
<Box className={classes.contentIntro}>
<Typography variant="subtitle2">Sign Up Now!</Typography>
<Typography className={classes.contentP}>
Sign Up Now with Facebook or Google, add your profile info, and keep
track of Angel City Sports Games, Clinics, and other events! All the
info you need is all in one place - The Angel City Sports App.
</Typography>
</Box>
<Box className={classes.btnContainer}>
<Button
className={classes.btn1}
onClick={() => loginWithRedirect({})}
>
<FaFacebookSquare className={classes.icon} />
<p>Sign up with Facebook</p>
</Button>
<Button
className={classes.btn2}
onClick={() => loginWithRedirect({})}
>
<FaGoogle className={classes.icon} />
<p>Sign up with Google</p>
</Button>
<Link
to="privacy-policy"
style={{ padding: "0" }}
className={classes.privacyLink}
>
<p>Privacy Policy</p>
</Link>
</Box>
<Link to="accessibility" className={classes.a11yLink}>
Accessibility Statement
</Link>
</Container>
</IconContext.Provider>
);
}
Example #5
| Source File: Header.jsx From emprezzo with MIT License | 5 votes |
|
Header = ({ children, title, date, subtitle, cover, socialDetails, likeEnabled }) => (
<Wrapper>
<Helmet>
<script src="//w.likebtn.com/js/w/widget.js"></script>
</Helmet>
{cover && typeof cover === 'object' &&
<Img fluid={cover || {} || [] || ''} />
}
{cover && typeof cover === 'string' &&
<img src={cover || {} || [] || ''} style={{ width: '100%', objectFit: 'fill', objectPosition: '50% 50%' }} />
}
<Text>
{likeEnabled &&
<img src={likeEnabled.storeProfileImage} title={title} alt={title} style={{ 'margin-top': '4rem', 'max-height': '80px', 'textAlign': 'center', 'borderRadius': '0%' }} />
}
{likeEnabled &&
<span
className="likebtn-wrapper"
data-theme="custom"
data-icon_l="str1-o"
data-icon_d="sgn9-f"
data-icon_l_c="rgb(55,24,71)"
data-icon_l_c_v="rgb(192,76,253)"
data-icon_d_c="rgb(55,24,71)"
data-icon_d_c_v="rgba(253,76,97,0.88)"
data-bg_c="#ffffff"
data-bg_c_v="#ffffff"
data-f_family="Courier New"
data-i18n_like="favorite"
data-ef_voting="bounce"
data-white_label="true"
data-rich_snippet="true"
data-identifier={likeEnabled.storeName}
data-counter_count="true"
data-popup_disabled="true"
data-share_enabled="false"
data-addthis_pubid="ra-5f7b9ff19ad7a3f6"
data-item_url={likeEnabled.storeURL}
data-item_title={likeEnabled.storeName}
data-item_image={likeEnabled.storeProfileImage}
data-lazy_load="false"
data-tooltip_enabled="false"
data-site_id="5f795f90943ec9bf477cbfbe"
>
</span>
}
<h3 style={{ 'margin-bottom': '0.5rem'}}>{title}</h3>
<h4>{subtitle}</h4>
{socialDetails &&
<SocialIcons>
{socialDetails.InstagramLink &&
<a href={socialDetails.InstagramLink} target="_blank"><FaInstagram size="32" color="black" /></a>
}
{socialDetails.FacebookLink &&
<a href={socialDetails.FacebookLink} target="_blank"><FaFacebookSquare size="32" color="black" /></a>
}
{socialDetails.PinterestLink &&
<a href={socialDetails.PinterestLink} target="_blank"><FaPinterestSquare size="32" color="black" /></a>
}
{socialDetails.TwitterLink &&
<a href={socialDetails.TwitterLink} target="_blank"><FaTwitterSquare size="32" color="black" /></a>
}
{socialDetails.YouTubeLink &&
<a href={socialDetails.YouTubeLink} target="_blank"><FaYoutube size="32" color="black" /></a>
}
</SocialIcons>
}
{children && <Subtitle dangerouslySetInnerHTML={{ __html: children }} />}
</Text>
</Wrapper>
)
