@fortawesome/free-solid-svg-icons#faUser JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#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: AmcatAssess.js From GB-GCGC with MIT License | 6 votes |
|
render(){
return(
<tr>
<td>{this.props.obj.sno}</td>
<td align="left">{this.props.obj.assessment}</td>
<td>{this.props.obj.YOP}</td>
<td>{this.props.obj.Date}</td>
<td>{this.props.obj.attended}</td>
<td>{this.props.obj.absent}</td>
<td>{this.props.obj.max}</td>
<td>{this.props.obj.avg}</td>
<td>{this.props.obj.min}</td>
<td>
<Tooltip title="Students" placement="right">
<Link to={"/user/"+this.props.obj.id} ><FontAwesomeIcon icon={faUser} className="ml-2 p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
</Tooltip>
</td>
</tr>
);
}
Example #2
| Source File: Icon.js From mailmask with GNU Affero General Public License v3.0 | 6 votes |
|
ICONS = {
bars: faBars,
'check-circle': faCheckCircle,
'chevron-down': faChevronDown,
'chevron-right': faChevronRight,
'exchange-alt': faExchangeAlt,
exclamation: faExclamation,
'exclamation-triangle': faExclamationTriangle,
info: faInfo,
moon: faMoon,
question: faQuestion,
rss: faRss,
'sign-in-alt': faSignInAlt,
sun: faSun,
snowflake: faSnowflake,
star: faStar,
'times-circle': faTimesCircle,
user: faUser,
}
Example #3
| Source File: _app.jsx From teach-yourself-code with MIT License | 6 votes |
|
library.add( faHome, faInfoCircle, faUser, faYoutube, faBookmark, faSignOutAlt, faCaretDown, faArrowAltCircleLeft, faArrowAltCircleRight, faAtom, faMap );
Example #4
| Source File: GitterRoomItem.js From Webiu with MIT License | 6 votes |
|
GitterRoomItem = ({name, avatarUrl, roomUrl, userCount, visible}) => {
return (
<div className="gitter-room-list-item-component" aria-hidden="true" onClick={() => window.open(roomUrl, "_blank")}>
<img className="image" alt="Avatar" src={avatarUrl && avatarUrl !== "" ? avatarUrl : withPrefix('/images/gitterPlaceholder.png')} />
<div>
<p className="gitter-room-name">{name}</p>
<p className="gitter-room-members">
<FontAwesomeIcon icon={faUser} /> {userCount} Members
</p>
{visible ? <p className="gitter-room-members">
Public IRC
</p> : null}
</div>
</div>
)
}
Example #5
| Source File: NavBar.stories.js From Webiu with MIT License | 6 votes |
|
navbar.args = {
firstName: "Dress",
secondName: "Fit",
categories: [
{
id: 1,
route: "/",
name: "Home",
},
{
id: 2,
route: "/women",
name: "Women",
},
{
id: 3,
route: "/men",
name: "Men",
},
{
id: 4,
route: "/kids",
name: "Baby & Kids",
},
{
id: 5,
route: "/accessories",
name: "Accessories",
},
],
iconList: [
{ icon: faSearch, link: "/search", alt: "search" },
{ icon: faShoppingCart, link: "/cart", alt: "cart" },
{ icon: faUser, link: "/user", alt: "user" },
],
}
Example #6
| Source File: ClientInfo.js From schematic-capture-fe with MIT License | 5 votes |
|
ClientInfo = (props) => {
const [details, setDetails] = useState(false);
const toggle = () => setDetails(!details);
const clientInfo = props.info
const formatToPhone = phone => {
const zip = phone.substring(0, 3)
const middle = phone.substring(3, 6)
const last = phone.substring(6, 10)
if (phone.length !== 10) {
return phone;
}
return `(${zip}) ${middle}-${last}`
}
let phone = formatToPhone(clientInfo.phone)
if (details === true) {
return (
<>
<DetailsBtn2 onClick={toggle}>View Details</DetailsBtn2>
<Container>
<Mod isOpen={details} toggle={toggle}>
<MH1 data-cy="assign-tech-header">{clientInfo.companyName}</MH1>
<hr></hr>
<MBody>
<SpaceBetween>
<div>
<BorderedDiv>
<FontAwesomeIcon icon={faPhone} />
<MDiv>
<p>{phone}</p>
</MDiv>
</BorderedDiv>
<BorderedDiv>
<FontAwesomeIcon icon={faMapMarkerAlt} />
<MDiv>
<p>{clientInfo.street}</p>
<p>{clientInfo.city}</p>
<p>{clientInfo.state}</p>
<p>{clientInfo.zip}</p>
</MDiv>
</BorderedDiv>
<BorderedDiv>
<FontAwesomeIcon icon={faUser} />
<MDiv>
{/* @TODO: Pull this info from props */}
<p>{clientInfo.contactName}</p>
<p>{clientInfo.contactEmail}</p>
</MDiv>
</BorderedDiv>
</div>
</SpaceBetween>
<MButton onClick={toggle}>Done</MButton>
</MBody>
</Mod>
</Container>
</>
)
} else {
return (
<DetailsBtn onClick={toggle}>View Details</DetailsBtn>
)
}
}
Example #7
| Source File: UserIcon.js From GB-GCGC with MIT License | 5 votes |
|
render(){
return(
<div>
<FontAwesomeIcon icon={faUser} className="mr-2" /> User
</div>
)
}
Example #8
| Source File: Maps.js From covidAnalytics with MIT License | 5 votes |
|
render() {
return (
<div className="cardContainer">
<Card>
<CardBody>
<CardTitle tag="h4" className=" mb-2 mb-xl-2 font-weight-bold">
Mapa Rio Grande do Sul
</CardTitle>
</CardBody>
<Map center={center} zoom={7} maxZoom={9}>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<MarkerClusterGroup>
{array_obj_confirmed.map(({lat, lng, nome, confirmed, pop_estimada, data}, index) => (
<Marker position={[lat, lng]} key={index} icon={new L.NumberedDivIcon({number: confirmed})} attribution="confirmed" >
<Popup minWidth={250}>
<div className="popUp-container">
<div className="popUp-title">{nome}</div>
<div className="popUp-body">
<ul>
<li><FontAwesomeIcon icon={faVirus}/> Casos confirmados: {confirmed}</li>
<li><FontAwesomeIcon icon={faUser}/> População Estimada 2019: {pop_estimada}</li>
<li><FontAwesomeIcon icon={faCalendar}/> Data da ultima atualização: {data}</li>
</ul>
</div>
</div>
</Popup>
</Marker>
))}
</MarkerClusterGroup>
</Map>
</Card>
</div>
);
}
Example #9
| Source File: index.js From Official-Website with MIT License | 5 votes |
|
BlogCard = (props) => {
const {
_id,
authorName,
lang,
createdAt,
title,
authorProfileLink,
cover,
metaDescription,
} = props.data;
let isDescArabic = isArabic(metaDescription);
const titleSlugify = (title) => {
return title.toLowerCase().replace(/\s+/g, "-").replace(/&/g, "-and-");
};
return (
<article className={`row mt-5`}>
<section className="col-md-3 text-md-right text-left">
<ul className="list-unstyled pt-5 d-flex flex-row-reverse d-md-block">
<li className="px-md-0 px-3">
<a
href={authorProfileLink}
rel="noreferrer noopener"
target="_blank"
className="profile-links"
>
{authorName} <FontAwesomeIcon icon={faUser} />
</a>
</li>
<li className="px-md-0 px-3">
{parseDate(createdAt)} <FontAwesomeIcon icon={faCalendarWeek} />
</li>
</ul>
</section>
<section className={`col-md-9 d-flex justify-content-right`}>
<div
className={`card border-0 ${lang === "Arabic" && "text-right"} ${
styles["blog-card"]
}`}
>
<Link to={`/blog/${_id}/${titleSlugify(`${title}`)}`}>
<img
src={cover}
className={`${styles["blog-card__image"]} card-img-top `}
alt={`${title}'s cover`}
/>
</Link>
<div className={`card-body ${styles["blog__info"]}`}>
<h2>
<Link to={`/blog/${_id}/${titleSlugify(`${title}`)}`}>
{title}
</Link>
</h2>
<p className={`${isDescArabic && "letter-spacing-none"} card-text`}>
{metaDescription.split(" ").slice(0, 30).join(" ")}
</p>
</div>
</div>
</section>
</article>
);
}
Example #10
| Source File: navbar.component.js From blogApp with MIT License | 5 votes |
|
render() {
return (
<Navbar color='dark' dark expand='lg'>
<Link
to='/'
className='navbar-brand'
style={{ fontFamily: "Monoton", fontWeight: "100" }}>
<img
src={logo}
style={{ maxWidth: "40px" }}
className='mx-2'
/>
BlogApp
</Link>
<NavbarToggler onClick={this.toggle} />{" "}
<Collapse isOpen={this.state.isOpen} navbar>
{this.state.user ? (
<Nav className='ml-auto mr-2' navbar>
<NavItem className='navbar-item'>
<ButtonDropdown
isOpen={this.state.isDropdownOpen}
toggle={this.dropdownToggle}>
<Button id='caret' color='primary'>
<FontAwesomeIcon
icon={faUser}
className='mr-2'
/>
{this.state.user.username}
</Button>
<DropdownToggle caret color='primary' />
<DropdownMenu right>
<Link
to='/myblogs/'
className='dropdown-item'>
My Blogs
</Link>
<DropdownItem divider />
<DropdownItem onClick={this.logout}>
logout
<FontAwesomeIcon
icon={faSignOutAlt}
className='ml-3'
/>
</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</NavItem>
</Nav>
) : (
<Nav className='ml-auto' navbar>
<NavItem className='navbar-item'>
<Link className='nav-link' to='/login'>
Login
</Link>
</NavItem>
</Nav>
)}
</Collapse>
</Navbar>
);
}
Example #11
| Source File: index.js From Webiu with MIT License | 4 votes |
|
GithubRepo = ({ reponame, title, auth_token }) => {
const [loading, setLoading] = useState(true)
const [repo, setRepo] = useState(null)
useEffect(() => {
const repoFetchUrl = `https://api.github.com/repos/${reponame}?access_token=${auth_token}`
setLoading(true)
fetch(repoFetchUrl, {
method: 'GET',
headers: new Headers({
'Authorization': auth_token,
'Content-Type': 'application/json'
})})
.then((res) => res.json()).then((data) => {
setRepo(data)
setLoading(false)
})
.catch((err) => { throw err });
}, [reponame, auth_token])
return (
<div className="github-repo-component">
{title ? <div className="header-component">
<h2><FontAwesomeIcon className="icon-h2" icon={faGithub} /> <span className="h2-title">{title}</span></h2>
</div> : null}
{repo && !repo.message ?
<Container>
{loading && <p>Fetching the details</p>}
{repo ?
<GithubCard name={repo.name} description={repo.description.substring(0, 300)}
image={repo.organization.avatar_url}
username={repo.full_name} url={repo.html_url}
from={repo.created_at} />
: null}
<div style={{textAlign: "center"}}>
{loading && <p>Fetching the details</p>}
{repo ?
<Row>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faAsterisk} /> Owner</p>
<p className="card-para">{repo.owner.login}</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faCode} /> Languages</p>
<p className="card-para">{repo.language}</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faCodeBranch} /> No. of Forks</p>
<p className="card-para">{repo.forks}</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faHistory} /> Last Updated</p>
<p className="card-para">{moment(repo.upadted_at).format("MMMM Do YYYY")}</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faExclamation} /> Open Issues</p>
<p className="card-para">{repo.open_issues_count} Issues Opened</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faUser} /> No. of Contributors</p>
<p className="card-para">{repo.subscribers_count}</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faGithubAlt} /> default Branch</p>
<p className="card-para">{repo.default_branch}</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faIdBadge} /> License</p>
<p className="card-para">{repo.license.name}</p>
</div>
</Col>
</Row>
: null}
</div>
</Container>
: <div style={{textAlign: "center"}}><h2>Repo Not Found, Please check the repo name or the Auth Token</h2></div>}
</div>
)
}
