@fortawesome/free-solid-svg-icons#faUserCircle JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faUserCircle.
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: index.js From wedding-planner with MIT License | 6 votes |
|
ProfileLink = () => {
return (
<OverlayTrigger
placement="bottom"
overlay={<Tooltip id="tooltip-profile">Profile</Tooltip>}
>
<Nav.Link href="/profile">
<FontAwesomeIcon icon={faUserCircle} size="lg" />
</Nav.Link>
</OverlayTrigger>
);
}
Example #2
| Source File: Header.js From ponce-tournois-mario-kart with MIT License | 4 votes |
|
function DesktopHeader() {
const history = useHistory();
const dispatch = useDispatch();
const { user } = useSelector((state) => state.auth);
const [open, setOpen] = useState(false);
const dropdownRef = useRef(null);
useEffect(() => {
function closeDropdown(e) {
if (
open &&
dropdownRef.current &&
!dropdownRef.current.contains(e.target)
) {
setOpen(false);
}
}
document.addEventListener('mousedown', closeDropdown);
return () => document.removeEventListener('mousedown', closeDropdown);
}, [dropdownRef, open, setOpen]);
const close = () => setOpen(false);
const onSignout = () => history.push('/');
return (
<>
<div className="header__nav">
<Link to="/" className="header__logo">
<img src={ponceFleur} alt="Ponce fleur" />
</Link>
<ul className="header__navList">
<li>
<NavLink
className="header__navListItem"
to="/history"
activeClassName="header__navListItem--active"
>
Historique
</NavLink>
</li>
<li>
<NavLink
className="header__navListItem"
to="/races"
activeClassName="header__navListItem--active"
>
Circuits joués
</NavLink>
</li>
<li>
<NavLink
className="header__navListItem"
to="/statistics"
activeClassName="header__navListItem--active"
>
Statistiques
</NavLink>
</li>
{user && user.isAdmin && (
<li>
<NavLink
className="header__navListItem"
to="/admin"
activeClassName="header__navListItem--active"
>
Administration
</NavLink>
</li>
)}
</ul>
</div>
{user ? (
<div className="header__dropdownWrapper" ref={dropdownRef}>
<FontAwesomeIcon
icon={faUserCircle}
size="2x"
className="header__profilPicture"
onClick={() => setOpen(!open)}
/>
<AnimatePresence>
{open && (
<motion.div
className="header__dropdown"
initial={{
opacity: 0,
y: '-50px',
}}
animate={{
opacity: 1,
y: 0,
}}
exit={{
opacity: 0,
y: '-30px',
}}
>
<ul className="header__dropdownNavList">
<NavLink
to={`/users/${user.username}`}
onClick={close}
>
<li>Profil</li>
</NavLink>
<NavLink to="/settings" onClick={close}>
<li>Paramètres</li>
</NavLink>
<li
onClick={() =>
dispatch(signout(onSignout))
}
>
Déconnexion
</li>
</ul>
</motion.div>
)}
</AnimatePresence>
</div>
) : (
<TwitchButton />
)}
</>
);
}
Example #3
| Source File: Header.js From ponce-tournois-mario-kart with MIT License | 4 votes |
|
function MobileHeader() {
const dispatch = useDispatch();
const history = useHistory();
const { user } = useSelector((state) => state.auth);
const [open, setOpen] = useState(false);
const close = () => setOpen(false);
const onSignout = () => history.push('/');
return (
<>
<Link to="/" className="header__logo" onClick={close}>
<img src={ponceFleur} alt="Ponce fleur" />
</Link>
<FontAwesomeIcon
icon={open ? faTimes : faBars}
className="header__hamburger"
onClick={() => setOpen(!open)}
/>
<AnimatePresence>
{open && (
<motion.div
style={{ flexBasis: '100%' }}
initial={{
opacity: 0,
y: '-50px',
}}
animate={{
opacity: 1,
y: 0,
}}
exit={{
opacity: 0,
y: '-20px',
}}
>
<ul className="header__smNavList">
<li>
<NavLink
to="/history"
activeClassName="header__smNavListItem--active"
onClick={close}
>
Historique
</NavLink>
</li>
<li>
<NavLink
to="/races"
activeClassName="header__smNavListItem--active"
onClick={close}
>
Circuits joués
</NavLink>
</li>
<li>
<NavLink
to="/statistics"
activeClassName="header__smNavListItem--active"
onClick={close}
>
Statistiques
</NavLink>
</li>
{user && user.isAdmin && (
<li>
<NavLink
to="/admin"
activeClassName="header__smNavListItem--active"
onClick={close}
>
Administration
</NavLink>
</li>
)}
</ul>
<hr />
{user ? (
<div className="header__smProfilWrapper">
<Row align="center">
<Col xs="content">
<FontAwesomeIcon
icon={faUserCircle}
size="2x"
className="header__profilPicture"
onClick={() => setOpen(!open)}
/>
</Col>
<Col>
<strong>{user.username}</strong>
</Col>
</Row>
<Row className="header__smProfilLinks">
<Col xs={6}>
<NavLink
to={`/users/${user.username}`}
onClick={close}
>
Profil
</NavLink>
</Col>
<Col xs={6}>
<NavLink to="/settings" onClick={close}>
Paramètres
</NavLink>
</Col>
<Col
xs={6}
onClick={() => {
close();
dispatch(signout(onSignout));
}}
>
<span>Déconnexion</span>
</Col>
</Row>
</div>
) : (
<Row
className="header__smAuthButton"
justify="center"
>
<Col xs="content">
<TwitchButton />
</Col>
</Row>
)}
</motion.div>
)}
</AnimatePresence>
</>
);
}
Example #4
| Source File: myBlog.component.js From blogApp with MIT License | 4 votes |
|
render() {
const blog = this.props.blog;
return (
<div
className='col-12 col-md-6 col-lg-4 col-xl-3 mb-5'
key={blog._id}>
<Card className='p-1 m-1' id='cards'>
<Card>
<CardImg
top
width='100%'
src={blog.image}
alt='Card image cap'
className='img-fluid'
/>
<CardImgOverlay>
<h3>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{blog.likes.length}
</h3>
</CardImgOverlay>
</Card>
<CardBody>
<CardTitle className='text-primary'>
<h5>
{blog.title}
{this.state.liked ? (
<span
className='float-right '
style={{ cursor: "pointer" }}
onClick={this.toggleLike}
/>
) : (
<span
className='float-right '
onClick={this.toggleLike}>
{/* <FontAwesomeIcon
style={{
color: "rgba(0,0,0,0.2)",
cursor: "pointer",
}}
icon={faHeart}
className=''
/> */}
</span>
)}
</h5>
</CardTitle>
<CardSubtitle>
{"-"}
<em>@{blog.author.username}</em>
</CardSubtitle>
<br />
<CardText className=''>
{blog.body.substring(0, 50)}
{" ..."}
</CardText>
<div className='row justify-content-center'>
<Button
className='btn btn-sm col-5 mr-1'
color='success'>
<Link
to={{
pathname: `/blog/${blog._id}`,
blog: { blog },
}}
className='text-decoration-none text-white'>
Read More
</Link>
</Button>
<Button
className='col-5 btn btn-sm ml-1'
color='danger'
onClick={this.showLikes}>
Likes
</Button>
</div>
</CardBody>
{blog.date && (
<CardFooter className='small '>
<FontAwesomeIcon
icon={faCalendar}
className='mr-2'
/>
{new Intl.DateTimeFormat("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
}).format(Date.parse(blog.date))}
{/* {blog.date} */}
{this.state.isOpen && (
<div className='likes m-3'>
<h6>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{this.state.likes.length} Likes
</h6>
<ul className='list-group list-group-flush'>
{this.state.likes.map((user) => (
<li className='list-group-item py-2 pl-0'>
<FontAwesomeIcon
icon={faUserCircle}
// className='text-danger'
/>
{" "}
{user.username}
</li>
))}
</ul>
</div>
)}
</CardFooter>
)}
</Card>
</div>
);
}
