react-icons/fa#FaUser JavaScript Examples
The following examples show how to use
react-icons/fa#FaUser.
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: NoUserAvatar.js From RC4Community with Apache License 2.0 | 6 votes |
|
export function NoUserAvatar({size,name}){
const char = name ? name.charAt(0) : null;
return (
<div
className="d-flex justify-content-center align-items-center text-capitalize"
style={{
width: `${size}px`,
height: `${size}px`,
background: "#dee2e6",
borderRadius: "50%"
}}>
{
char ?
<span style={{fontSize: `${size*0.65}px`}}>{char}</span>
:
<FaUser size={`${size*0.45}px`}/>
}
</div>
)
}
Example #2
| Source File: index.js From haskell.foundation with MIT License | 5 votes |
|
icons = {
heart: <FaHeart />,
lock: <FaLockOpen />,
users: <FaUserFriends />,
cubes: <FaCubes />,
user: <FaUser />
}
Example #3
| Source File: header-desktop.js From next-ecommerce with MIT License | 4 votes |
|
export default function HeaderDesktop({ viewer }) {
const cart = useQuery(CART_COUNT);
return (
<>
<div className="header header-top">
<Logo />
<SearchBox />
<div className="nav-buttons">
<Link href="/cart">
<a className="nav-buttons-items">
<FaShoppingCart color="#808080" />
<p>
<sup className="items-total">{cart.data.cart.cartCount}</sup>{' '}
Items
</p>
</a>
</Link>
<Link href="/wishlist">
<a className="nav-buttons-wishlist">
<FaRegHeart color="#808080" />
<p>Wishlist</p>
</a>
</Link>
{!viewer && (
<Link href="/user/login">
<a className="nav-buttons-signin">
<FaUser color="#808080" />
<p>Sign In</p>
</a>
</Link>
)}
{viewer && (
<>
<Link href="/profile">
<a className="nav-buttons-profile">
<FaUser color="#808080" />
<p>{viewer.name}</p>
</a>
</Link>
<Link href="/user/signout">
<a className="nav-buttons-signout">
<FaSignOutAlt />
</a>
</Link>
</>
)}
</div>
</div>
<div className="header header-bottom">
<div className="all-categories-box">
<FaBars color="#d8d8d8" />
<select name="categories" id="categories">
<option value="All Categories" selected>
All Categories
</option>
<option value="#">Desktop</option>
<option value="#">Smartphone</option>
<option value="#">Watches</option>
<option value="#">Games</option>
<option value="#">Laptop</option>
<option value="#">Keyboards</option>
<option value="#">TV & Video</option>
<option value="#">Accessories</option>
</select>
</div>
<nav className="main-nav">
<Link href="#">
<a>Super Deals</a>
</Link>
<Link href="#">
<a>Featured Brands</a>
</Link>
<Link href="#">
<a>Collections</a>
</Link>
<Link href="#">
<a>Bestselling</a>
</Link>
</nav>
<div className="settings">
<div className="menu-dropdown">
<p>Help</p>
</div>
<div className="menu-dropdown">
<p>USD</p>
</div>
<div className="menu-dropdown">
<p>Language</p>
</div>
</div>
</div>
<style jsx>{`
/* Header Top */
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 28px 10vw;
}
.nav-buttons {
display: flex;
flex-direction: row;
align-items: center;
}
.nav-buttons a {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 32px;
font-style: normal;
font-weight: 500;
font-size: 14px;
text-decoration: none;
color: #808080;
}
.nav-buttons .items-total {
font-size: 12px;
align-self: flex-end;
}
.nav-buttons .nav-buttons-signout {
margin-left: 12px;
}
.nav-buttons a:hover {
text-decoration: underline;
}
.nav-buttons a p {
margin-left: 8px;
}
/* Header Bottom */
.header-bottom {
padding: 0px 10vw;
border-top: 2px solid #f5f5f5;
}
.header-bottom .all-categories-box {
height: 100%;
display: flex;
align-items: center;
/* Border */
border-right: 2px solid #f5f5f5;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 48px;
}
.header-bottom .all-categories-box select {
height: 100%;
padding-left: 15px;
font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 60px;
color: #808080;
border: none;
background: none;
}
.header-bottom .all-categories-box select:focus {
outline: none;
}
.header-bottom .main-nav {
display: flex;
align-items: center;
}
.header-bottom .main-nav a {
font-style: normal;
font-weight: 500;
font-size: 14px;
color: #666666;
text-decoration: none;
margin-left: 16px;
margin-right: 16px;
}
.header-bottom .main-nav a:hover {
text-decoration: underline;
}
.header-bottom .settings {
display: flex;
flex-direction: row;
align-items: center;
}
.header-bottom .settings .menu-dropdown {
/* Border */
border-left: 2px solid #f5f5f5;
padding: 20px 24px;
}
.header-bottom .settings .menu-dropdown p {
font-style: normal;
font-weight: 500;
font-size: 14px;
color: #b3b3b3;
}
`}</style>
</>
);
}
Example #4
| Source File: Navbar.js From devagram with GNU General Public License v3.0 | 4 votes |
|
Navbar = (props) => {
const [searchText, setSearchText] = useState("");
const [open, setOpen] = useState(false);
const [openProfile, setOpenProfile] = useState(false);
return (
<>
<nav className={classes.Navbar}>
<div className={classes.NavContent}>
<Title title="Devagram" />
<div className={classes.Search}>
<input
type="text"
value={searchText}
onChange={setSearchText}
name="search"
required
placeholder="Search"
aria-labelledby="label-search"
/>
<Link to="#">
<FaSearch size="1.2em" style={{ color: "#aaa" }} />
</Link>
</div>
<div className={classes.Options}>
<div className={classes.Option}>
<Link to="#">
<FaInbox style={{ color: "black" }} />
</Link>
</div>
<div className={classes.Option}>
<Link to="/feeds">
<FaCompass style={{ color: "black" }} />
</Link>
</div>
<div className={classes.Option}>
<Link to="/connect">
<FaUsers style={{ color: "black" }} />
</Link>
</div>
<div className={classes.Option}>
<Link to="/jobsAndHack">
<AiFillCode style={{ color: "black" }} />
</Link>
</div>
<div
className={classes.Option}
onClick={() => setOpenProfile(!openProfile)}
>
<CgProfile style={{ color: "black", cursor: "pointer" }} />
</div>
<div
className={(classes.Option, classes.Burger)}
onClick={() => setOpen(!open)}
>
<FaHamburger style={{ color: "black", cursor: "pointer" }} />
</div>
</div>
</div>
<div
className={[
classes.ProfileOptions,
openProfile ? classes.Open : "",
].join(" ")}
>
<div className={classes.ProfileOption}>
<NavLink to="/dashboard" activeClassName={classes.selected}>
<FaHome />
<span>Home</span>
</NavLink>
</div>
<div className={classes.ProfileOption}>
<NavLink to="#" activeClassName={classes.selected}>
<FaSearch />
<span>Search</span>
</NavLink>
</div>
<div className={classes.ProfileOption}>
<NavLink to="#" activeClassName={classes.selected}>
<FaPlus />
<span>Create Post</span>
</NavLink>
</div>
<div className={classes.ProfileOption}>
<NavLink to="/profile" activeClassName={classes.selected}>
<FaUser />
<span>Profile</span>
</NavLink>
</div>
</div>
<div
className={[classes.SmallScreen, open ? classes.Open : ""].join(" ")}
>
<div className={classes.SmallOption}>
<Link to="/dashboard">
<FaHome style={{ color: "black" }} />
<span>Home</span>
</Link>
</div>
<div className={classes.SmallOption}>
<Link to="#">
<FaInbox style={{ color: "black" }} />
<span>Inbox</span>
</Link>
</div>
<div className={classes.SmallOption}>
<Link to="/feeds">
<FaCompass style={{ color: "black" }} />
<span>Explore-feeds</span>
</Link>
</div>
<div className={classes.SmallOption}>
<Link to="/connect">
<FaUsers style={{ color: "black" }} />
<span>Connect</span>
</Link>
</div>
<div className={classes.SmallOption}>
<Link to="/jobsAndHack">
<AiFillCode style={{ color: "black" }} />
<span>jobs-hackathons</span>
</Link>
</div>
</div>
</nav>
</>
);
}
Example #5
| Source File: Navbar.js From developer-portfolio with Apache License 2.0 | 4 votes |
|
function Navbar() {
const { theme, setHandleDrawer } = useContext(ThemeContext);
const [open, setOpen] = useState(false);
const handleDrawerOpen = () => {
setOpen(true);
setHandleDrawer();
};
const handleDrawerClose = () => {
setOpen(false);
setHandleDrawer();
};
const useStyles = makeStyles((t) => ({
navMenu: {
fontSize: '2.5rem',
color: theme.tertiary,
cursor: 'pointer',
transform: 'translateY(-10px)',
transition: 'color 0.3s',
'&:hover': {
color: theme.primary,
},
[t.breakpoints.down('sm')]: {
fontSize: '2.5rem',
},
[t.breakpoints.down('xs')]: {
fontSize: '2rem',
},
},
MuiDrawer: {
padding: '0em 1.8em',
width: '14em',
fontFamily: ' var(--primaryFont)',
fontStyle: ' normal',
fontWeight: ' normal',
fontSize: ' 24px',
background: theme.secondary,
overflow: 'hidden',
borderTopRightRadius: '40px',
borderBottomRightRadius: '40px',
[t.breakpoints.down('sm')]: {
width: '12em',
},
},
closebtnIcon: {
fontSize: '2rem',
fontWeight: 'bold',
cursor: 'pointer',
color: theme.primary,
position: 'absolute',
right: 40,
top: 40,
transition: 'color 0.2s',
'&:hover': {
color: theme.tertiary,
},
[t.breakpoints.down('sm')]: {
right: 20,
top: 20,
},
},
drawerItem: {
margin: '2rem auto',
borderRadius: '78.8418px',
background: theme.secondary,
color: theme.primary,
width: '85%',
height: '60px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-evenly',
padding: '0 30px',
boxSizing: 'border-box',
border: '2px solid',
borderColor: theme.primary,
transition: 'background-color 0.2s, color 0.2s',
'&:hover': {
background: theme.primary,
color: theme.secondary,
},
[t.breakpoints.down('sm')]: {
width: '100%',
padding: '0 25px',
height: '55px',
},
},
drawerLinks: {
fontFamily: 'var(--primaryFont)',
width: '50%',
fontSize: '1.3rem',
fontWeight: 600,
[t.breakpoints.down('sm')]: {
fontSize: '1.125rem',
},
},
drawerIcon: {
fontSize: '1.6rem',
[t.breakpoints.down('sm')]: {
fontSize: '1.385rem',
},
},
}));
const classes = useStyles();
const shortname = (name) => {
if (name.length > 12) {
return name.split(' ')[0];
} else {
return name;
}
};
return (
<div className='navbar'>
<div className='navbar--container'>
<h1 style={{ color: theme.secondary }}>
{shortname(headerData.name)}
</h1>
<IoMenuSharp
className={classes.navMenu}
onClick={handleDrawerOpen}
aria-label='Menu'
/>
</div>
<Drawer
variant='temporary'
onClose={(event, reason) => {
if (reason !== 'backdropClick') {
handleDrawerClose();
} else if (reason !== 'escapeKeyDown') {
handleDrawerClose();
}
}}
anchor='left'
open={open}
classes={{ paper: classes.MuiDrawer }}
className='drawer'
disableScrollLock={true}
>
<div className='div-closebtn'>
<CloseIcon
onClick={handleDrawerClose}
onKeyDown={(e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
handleDrawerClose();
}
}}
className={classes.closebtnIcon}
role='button'
tabIndex='0'
aria-label='Close'
/>
</div>
<br />
<div onClick={handleDrawerClose}>
<div className='navLink--container'>
<Fade left>
<NavLink
to='/'
smooth={true}
spy='true'
duration={2000}
>
<div className={classes.drawerItem}>
<IoHomeSharp
className={classes.drawerIcon}
/>
<span className={classes.drawerLinks}>
Home
</span>
</div>
</NavLink>
</Fade>
<Fade left>
<NavLink
to='/#about'
smooth={true}
spy='true'
duration={2000}
>
<div className={classes.drawerItem}>
<FaUser className={classes.drawerIcon} />
<span className={classes.drawerLinks}>
About
</span>
</div>
</NavLink>
</Fade>
<Fade left>
<NavLink
to='/#resume'
smooth={true}
spy='true'
duration={2000}
>
<div className={classes.drawerItem}>
<HiDocumentText
className={classes.drawerIcon}
/>
<span className={classes.drawerLinks}>
Resume
</span>
</div>
</NavLink>
</Fade>
<Fade left>
<NavLink
to='/#services'
smooth={true}
spy='true'
duration={2000}
>
<div className={classes.drawerItem}>
<BsFillGearFill
className={classes.drawerIcon}
/>
<span className={classes.drawerLinks}>
Services
</span>
</div>
</NavLink>
</Fade>
<Fade left>
<NavLink
to='/#blog'
smooth={true}
spy='true'
duration={2000}
>
<div className={classes.drawerItem}>
<FaFolderOpen
className={classes.drawerIcon}
/>
<span className={classes.drawerLinks}>
Blog
</span>
</div>
</NavLink>
</Fade>
<Fade left>
<NavLink
to='/#contacts'
smooth={true}
spy='true'
duration={2000}
>
<div className={classes.drawerItem}>
<MdPhone className={classes.drawerIcon} />
<span className={classes.drawerLinks}>
Contact
</span>
</div>
</NavLink>
</Fade>
</div>
</div>
</Drawer>
</div>
);
}
