react-icons/fa#FaTwitterSquare JavaScript Examples
The following examples show how to use
react-icons/fa#FaTwitterSquare.
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: MobileSocialLinks.js From syntax.rocks with MIT License | 6 votes |
|
MobileSocialLinks = ({ contacts }) => {
return (
<div className="bottom-bar py-1">
<a className=" text-primary"
href={contacts.linkedin}>
<span title="Linked In">
<FaLinkedin size={26} style={{ color: "primary" }} />
</span>
</a>
<a className="text-light"
href={contacts.github}>
<span title="GitHub">
<FaGithubSquare size={26} style={{ color: "light" }} />
</span>
</a>
<a className="text-warning"
href={contacts.stackoverflow}>
<span title="Stack Overflow">
<FaStackOverflow size={26} style={{ color: "warning" }} />
</span>
</a>
<a className="text-success"
href={contacts.freecodecamp}>
<span title="freeCodeCamp">
<FaFreeCodeCamp size={26} style={{ color: "success" }} />
</span>
</a>
<a className="text-info"
href={contacts.twitter}>
<span title="Twitter">
<FaTwitterSquare size={26} style={{ color: "info" }} />
</span>
</a>
</div>
)
}
Example #2
| Source File: SocialLinks.js From syntax.rocks with MIT License | 6 votes |
|
SocialLinks = ({ contacts }) => {
return (
<div className="social-links float-right mr-4">
<a className="text-primary ml-4"
href={contacts.linkedin}>
<span title="Linked In">
<FaLinkedin size={40} style={{ color: "primary" }} />
</span>
</a>
<a className="text-light ml-4"
href={contacts.github}>
<span title="GitHub">
<FaGithubSquare size={40} style={{ color: "light" }} />
</span>
</a>
<a className="text-warning ml-4"
href={contacts.stackoverflow}>
<span title="Stack Overflow">
<FaStackOverflow size={40} style={{ color: "warning" }} />
</span>
</a>
<a className="text-success ml-4"
href={contacts.freecodecamp}>
<span title="freeCodeCamp">
<FaFreeCodeCamp size={40} style={{ color: "success" }} />
</span>
</a>
<a className="text-info ml-4"
href={contacts.twitter}>
<span title="Twitter">
<FaTwitterSquare size={40} style={{ color: "info" }} />
</span>
</a>
</div>
)
}
Example #3
| Source File: SocialLinks.js From syntax.rocks with MIT License | 6 votes |
|
SocialLinks = ({ contacts }) => {
return (
<div className="side-social-links float-left mt-3 mb-3">
<a className="text-light p-2" href={contacts.linkedin}>
<span title="Linked In">
<FaLinkedin size={26} style={{ color: "secondary" }} />
</span>
</a>
<a className="text-light p-2" href={contacts.github}>
<span title="GitHub">
<FaGithubSquare size={26} style={{ color: "secondary" }} />
</span>
</a>
<a className="text-light p-2" href={contacts.stackoverflow}>
<span title="Stack Overflow">
<FaStackOverflow size={26} style={{ color: "secondary" }} />
</span>
</a>
<a className="text-light p-2" href={contacts.freecodecamp}>
<span title="freeCodeCamp">
<FaFreeCodeCamp size={26} style={{ color: "secondary" }} />
</span>
</a>
<a className="text-light p-2" href={contacts.twitter}>
<span title="Twitter">
<FaTwitterSquare size={26} style={{ color: "secondary" }} />
</span>
</a>
</div>
)
}
Example #4
| 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 #5
| 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 #6
| 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>
)
Example #7
| Source File: Profile.js From react-portal with MIT License | 4 votes |
|
Profile = () => {
const [showSkeleton, setShowSkeleton] = useState(false);
const Creds = getRole();
const [user, setUser] = useState(null);
const [profileDrawer, setProfileDrawer] = useState(false);
const [passwordDrawer, setPasswordDrawer] = useState(false);
const [refresh, setRefresh] = useState(false);
const Image = styled.img`
width: 120px;
height: 120px;
border-radius: 50%;
padding: 4px;
border: 2px solid #d5d5d5;
transition: 0.2s all ease-out;
&:hover {
transition: 0.2s all ease-in;
border: 4px solid #4285f4;
}
`;
const LogoStyle = styled.span`
font-size: 28px;
color: #595959;
&:hover {
transition: 0.2s all ease-in;
color: #4285f4;
}
`;
const handleUpdateUser = () => {
setProfileDrawer(false);
};
const Refresh = () => {
setRefresh(!refresh);
};
const handleUpdatePassword = () => {
setPasswordDrawer(false);
};
useEffect(() => {
(async () => {
setShowSkeleton(true);
try {
if (true) {
const res = await getUserService(Creds.id);
if (res.message === "success") {
setUser(res.data);
setShowSkeleton(false);
} else {
_notification("warning", "Error", res.message);
}
}
} catch (err) {
_notification("error", "Error", err.message);
setShowSkeleton(false);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [refresh]);
return (
<>
<PageTitle title="Profile" bgColor="#DB4437" />
<Skeleton loading={showSkeleton} active>
<>
<Row gutter={16}>
<Col xs={0} sm={0} md={4} lg={6}></Col>
<Col
xs={24}
sm={24}
md={8}
lg={6}
className="profile-image-container"
>
<Image
src={
user && user.image
? user.image
: "https://avatars.dicebear.com/v2/identicon/16042.svg"
}
alt="Profilepic"
/>
</Col>
<Col xs={24} sm={24} md={9} lg={6}>
<Row className="name center-align-row">
{user && user.name
? user.name
: "Not Available"}
</Row>
<Row className="center-align-row tag">
<Tag
color={
user && user.role === "lead"
? "red"
: user && user.role === "core"
? "geekblue"
: "orange"
}
style={{
textTransform: "capitalize",
fontSize: "14px",
textAlign: "center"
}}
>
{user && user.role ? user.role : "member"}
</Tag>
</Row>
<Row className="branch center-align-row">
<Col xs={0} sm={3} md={0}></Col>
<Col
xs={3}
sm={2}
md={4}
lg={3}
className="icon"
>
<FaUserGraduate />
</Col>
<Col
xs={5}
sm={3}
md={6}
lg={6}
className="text"
>
{user && user.branch ? user.branch : "N/A"}
</Col>
<Col
xs={3}
sm={2}
md={4}
lg={3}
className="icon"
>
<AiFillCalendar />
</Col>
<Col
xs={5}
sm={5}
md={6}
lg={6}
className="text"
>
{user && user.year ? user.year : "N/A"}
</Col>
<Col xs={0} sm={0}></Col>
</Row>
</Col>
<Col xs={0} sm={0} md={3} lg={6}></Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Personal Information
</Divider>
<Row>
<Col xs={0} sm={0} md={2} lg={6}></Col>
<Col xs={24} sm={12} md={10} lg={6}>
<Row
style={{ justifyContent: "center" }}
className="contact-container"
>
<Col
xs={6}
sm={6}
md={6}
lg={8}
className="logos"
>
<AiFillPhone style={{ fontSize: "26px" }} />
</Col>
<Col
xs={10}
sm={10}
md={12}
lg={16}
className="info"
>
{user && user.contact
? user.contact
: "Not Provided"}
</Col>
</Row>
</Col>
<Col xs={24} sm={12} md={10} lg={6}>
<Row
style={{
justifyContent: "center"
}}
className="dob-container"
>
<Col xs={6} sm={6} lg={8} className="logos">
<FaBirthdayCake
style={{ fontSize: "24px" }}
/>
</Col>
<Col xs={10} sm={12} lg={12} className="info">
{user && user.dob
? user.dob.split("T")[0]
: "Not Provided"}
</Col>
</Row>
</Col>
<Col xs={0} sm={0} md={2} lg={6}></Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Contact Information
</Divider>
<Row className="social-links-container">
{user ? (
<>
{user.linkedin ? (
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={user.linkedin}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<AiFillLinkedin />
</LogoStyle>
</a>
</Col>
) : null}
{user.twitter ? (
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={user.twitter}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaTwitterSquare />
</LogoStyle>
</a>
</Col>
) : null}
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={`mailto:${user.email}`}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<MdEmail />
</LogoStyle>
</a>
</Col>
{user.portfolio ? (
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={user.portfolio}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FiLink />
</LogoStyle>
</a>
</Col>
) : null}
{user.github ? (
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={user.github}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaGithubSquare />
</LogoStyle>
</a>
</Col>
) : null}
</>
) : null}
</Row>
<Divider
style={{
color: "rgba(0,0,0,.25)"
}}
>
Bio
</Divider>
<Row
style={{
justifyContent: "center",
textAlign: "center"
}}
>
<Col sm={0} md={4} lg={6}></Col>
<Col sm={24} md={16} lg={12}>
{user && user.bio ? user.bio : "No Bio Available"}
</Col>
<Col sm={0} md={4} lg={6}></Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Update Details
</Divider>
<Row>
<Col sm={0} md={4} lg={6}></Col>
<Col
xs={24}
sm={12}
md={8}
lg={6}
className="button-container"
>
<Button
type="primary"
className="login-form-button"
onClick={() => {
setProfileDrawer(true);
}}
>
Update Details
</Button>
</Col>
<Col
xs={24}
sm={12}
md={8}
lg={6}
className="button-container"
>
<Button
type="primary"
className="login-form-button"
onClick={() => {
setPasswordDrawer(true);
}}
>
Change Password
</Button>
</Col>
<Col sm={0} md={4} lg={6}></Col>
</Row>
</>
<UpdateOptions
profileDrawer={profileDrawer}
setProfileDrawer={setProfileDrawer}
userData={Creds}
handleUpdateUser={handleUpdateUser}
Refresh={Refresh}
/>
<UpdateOptions
passwordDrawer={passwordDrawer}
setPasswordDrawer={setPasswordDrawer}
userData={Creds}
handleUpdatePassword={handleUpdatePassword}
/>
</Skeleton>
</>
);
}
Example #8
| Source File: UserProfile.js From react-portal with MIT License | 4 votes |
|
UserProfile = ({ visible, openProfile, uid }) => {
const [user, setUser] = useState(null);
const [showSkeleton, setShowSkeleton] = useState(false);
useEffect(() => {
(async () => {
setShowSkeleton(true);
try {
if (uid) {
const res = await getUserService(uid);
if (res.message === "success") {
setUser(res.data);
setShowSkeleton(false);
} else {
_notification("warning", "Error", res.message);
}
}
} catch (err) {
_notification("error", "Error", err.message);
}
})();
}, [uid]);
return (
<div>
<Modal
visible={visible}
footer={null}
closable={false}
onCancel={() => openProfile(false)}
style={{ top: "20px" }}
>
<IoIosArrowRoundBack
onClick={() => openProfile(false)}
style={{ fontSize: "28px", cursor: "pointer" }}
/>
<Skeleton loading={showSkeleton} active>
{user ? (
<Wrapper>
<Row gutter={16}>
<Col span={10}>
<Avatar
size={120}
src={
<Image
src={user.image}
alt="Profilepic"
/>
}
/>
</Col>
<Col span={14}>
<NameContainer>
<Name>
{user.name} <br />
<Row style={{ paddingTop: "10px" }}>
<Col span={12}>
<Tag
color={
user.role === "lead"
? "red"
: user.role ===
"core"
? "geekblue"
: "orange"
}
style={{
marginBottom: "5px",
textTransform:
"capitalize",
fontSize: "14px",
width: "75%",
textAlign: "center"
}}
>
{user.role}
</Tag>
</Col>
<Designation span="12">
{user.designation}
</Designation>
</Row>
</Name>
<Branch>
<Row gutter={12}>
<Col
span={2}
style={{
paddingTop: "2px"
}}
>
<FaUserGraduate />
</Col>
<Col span={6}>
{user.branch
? user.branch
: "N/A"}
</Col>
<Col
span={3}
style={{
marginTop: "2px"
}}
>
<AiFillCalendar />
</Col>
<Col>
{user.year
? user.year
: "N/A"}
</Col>
</Row>
</Branch>
</NameContainer>
</Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Personal Information
</Divider>
<Row>
<Col span={12}>
<Row>
<Col span={6}>
<Logo>
<AiFillPhone
style={{ fontSize: "26px" }}
/>
</Logo>
</Col>
<Col span={218}>
<Info>
{user.contact
? user.contact
: "Not Provided"}
</Info>
</Col>
</Row>
</Col>
<Col span={12}>
<Row>
<Col span={6}>
<Logo>
<FaBirthdayCake
style={{ fontSize: "24px" }}
/>
</Logo>
</Col>
<Col span={18}>
<Info>
{user.dob
? user.dob.split("T")[0]
: "Not Provided"}
</Info>
</Col>
</Row>
</Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Bio
</Divider>
<Row
style={{
textAlign: "center",
marginRight: "auto !important",
marginLeft: "auto !important",
justifyContent: "center",
display: "flex"
}}
>
<Col span={24}>
{user.bio ? user.bio : "No Bio Available"}
</Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Contact Me
</Divider>
<Row
style={{
textAlign: "center",
marginRight: "auto !important",
marginLeft: "auto !important",
justifyContent: "center",
display: "flex"
}}
>
<Col span={2}></Col>
{user.linkedin ? (
<Col span={4}>
<a
href={user.linkedin}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<AiFillLinkedin />
</LogoStyle>
</a>
</Col>
) : null}
{user.twitter ? (
<Col span={4}>
<a
href={user.twitter}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaTwitterSquare />
</LogoStyle>
</a>
</Col>
) : null}
<Col span={4}>
<a
href={`mailto:${user.email}`}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<MdEmail />
</LogoStyle>
</a>
</Col>
{user.portfolio ? (
<Col span={4}>
<a
href={user.portfolio}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FiLink />
</LogoStyle>
</a>
</Col>
) : null}
{user.github ? (
<Col span={4}>
<a
href={user.github}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaGithubSquare />
</LogoStyle>
</a>
</Col>
) : null}
<Col span={2}></Col>
</Row>
<Row
style={{
float: "right",
paddingBottom: "10px"
}}
>
<span style={{ paddingRight: "10px" }}>
Last active
</span>
<Tag color="green">
{user.lastActiveAt
? moment(user.lastActiveAt).format(
"DD MMM YYYY hh:mm"
)
: "never"}
</Tag>
</Row>
</Wrapper>
) : null}
</Skeleton>
</Modal>
</div>
);
}
