@fortawesome/free-solid-svg-icons#faSignOutAlt JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faSignOutAlt.
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: AddDets_navbar.js From placement-portal-web with MIT License | 6 votes |
|
render(){
return(
<div className="NavR_topnav">
<Link to="/add" className ="NavR_anchor"style={{ textDecoration: 'none' }} >RECRUITERS</Link>
<Link to="/Tpo2" className ="NavR_anchor"style={{ textDecoration: 'none' }} >STUDENTS</Link>
<form>
<div className="NavR_search-container">
<input type="text" placeholder="Search"/>
<FontAwesomeIcon icon={faSearch} className="searchIcon" />
</div>
</form>
<div className="NavR_logout" onClick={this.handleClick}>
<FontAwesomeIcon icon={faSignOutAlt} className="logoutIcon" />
</div>
{/* <div className="search-container">
<form >
<div className="inner-addon right-addon">
<FontAwesomeIcon icon={faCoffee} />
<input type="text" placeholder="Name:" name="name" required/>
</div>
</form>
</div> */}
</div>
)}
Example #2
| Source File: AddDets_navbar2.js From placement-portal-web with MIT License | 6 votes |
|
render(){
return(
<div className="NavR2_topnav">
<Link to="/display" className ="NavR2_anchor" style={{ textDecoration: 'none' }} >NAME</Link>
<Link to="/CompanyMain" className ="NavR2_anchor" style={{ textDecoration: 'none' }} >APPLICANTS</Link>
<form>
<div className="NavR2_search-container">
<input type="text" placeholder="Search"/>
<FontAwesomeIcon icon={faSearch} className="searchIcon" />
</div>
</form>
<div className="NavR_logout" onClick={this.handleClick}>
<FontAwesomeIcon icon={faSignOutAlt} className="logoutIcon" />
</div>
</div>
)}
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: LoginInfo.jsx From Log_app with MIT License | 6 votes |
|
LoginInfo = () => {
const { userData, setUserData } = useContext(StoreContext);
const Logut = (e) => {
e.preventDefault();
setUserData({
username: null,
email: null,
isLogged: false,
token: null,
});
localStorage.removeItem('LogAppUser');
};
return (
<div className={styles.loginInfo}>
{!userData.isLogged ? (
<NavLink to="/login" className={styles.link}>
Zaloguj się <FontAwesomeIcon icon={faSignInAlt} size="lg" />
</NavLink>
) : (
<div onClick={Logut} className={styles.link}>
<NavLink to="/">
Witaj {userData.username} <FontAwesomeIcon icon={faSignOutAlt} size="lg" />
</NavLink>
</div>
)}
</div>
);
}
Example #5
| Source File: App.js From lrc-staking-dapp with MIT License | 6 votes |
|
library.add( far, fas, faBookReader, faArrowLeft, faArrowRight, faQuestionCircle, faCopy, faSignOutAlt, faEdit, faAngleDown, faExternalLinkAlt, fab, faEthereum, faTwitter, faDiscord, faUnlink, faSearch, faFortAwesome, faExchangeAlt, faChartPie, faGlobe, faDonate, faDollarSign, );
Example #6
| Source File: index.js From wedding-planner with MIT License | 6 votes |
|
LogoutLink = () => {
const { logout } = useAuth0();
return (
<OverlayTrigger
placement="bottom"
overlay={<Tooltip id="tooltip-logout">Sign Out</Tooltip>}
>
<Nav.Link
onClick={() =>
logout({
returnTo: window.location.origin,
})
}
>
<FontAwesomeIcon icon={faSignOutAlt} size="lg" />
</Nav.Link>
</OverlayTrigger>
);
}
Example #7
| 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 #8
| Source File: NavigationBar.jsx From MyHome-Web with Apache License 2.0 | 5 votes |
|
render() {
return (
<Navbar>
<div>
<MenuIcon icon={this.props.menuToggled ? faTimes : faBars} onClick={this.props.onMenuToggle} />
<Text>MyHome logo</Text>
</div>
<div>
<span className="fa-layers fa-fw">
<FontAwesomeIcon icon={faBell} color={styles.colors.grey} size="lg" />
<Text className="fa-layers-counter" color={styles.colors.white} fontSize="2em" backgroundColor={styles.colors.red}>2</Text>
</span>
<span>
<Avatar src="https://http.cat/400" margin="0 10px" width="25px" height="25px" />
<Text
fontWeight="500"
dropdownMargin="0 0 0 -30px"
dropdown={
<ItemList>
{this.props.currentUser ?
<Item onClick={this.doSignOut}>
<FontAwesomeIcon icon={faSignOutAlt} />
<Text padding="0 0 0 5px">Logout</Text>
</Item>
:
<>
<Item onClick={this.goToSignUp}>
<FontAwesomeIcon icon={faUserPlus} />
<Text padding="0 0 0 5px">Sign Up</Text>
</Item>
<Item onClick={this.goToLogin}>
<FontAwesomeIcon icon={faSignInAlt} />
<Text padding="0 0 0 5px">Login</Text>
</Item>
</>
}
</ItemList>
}
>
{this.props.currentUser ? 'Tony Stark' : 'Guest'}
</Text>
</span>
</div>
</Navbar>
)
}
Example #9
| Source File: icon.js From uptime-kuma with MIT License | 5 votes |
|
library.add(
faArrowAltCircleUp,
faCog,
faEdit,
faEye,
faEyeSlash,
faList,
faPause,
faPlay,
faPlus,
faSearch,
faTachometerAlt,
faTimes,
faTimesCircle,
faTrash,
faCheckCircle,
faStream,
faSave,
faExclamationCircle,
faBullhorn,
faArrowsAltV,
faUnlink,
faQuestionCircle,
faImages,
faUpload,
faCopy,
faCheck,
faFile,
faAward,
faLink,
faChevronDown,
faSignOutAlt,
faPen,
faExternalLinkSquareAlt,
faSpinner,
faUndo,
faPlusCircle,
faAngleDown,
faLink,
);
Example #10
| Source File: SideBar.js From GB-GCGC with MIT License | 4 votes |
|
SideBar = ({ isOpen, toggle }) => (
<div className={classNames("sidebar", { "is-open": isOpen })}>
<div>
<div className="sidebar-header">
<span color="info" onClick={toggle} style={{ color: "#fff" }}>
×
</span>
<Link to={"/home"}>
<h3>GITAM Career Guidance Cell</h3>
</Link>
</div>
<div align="center" className="pt-2 pb-2">
<h4>Menu</h4>
</div>
<div className="side-menu">
<Nav vertical className="pb-3">
<li>
<NavLink tag={Link} to={"/home"}>
<FontAwesomeIcon icon={faHome} className="mr-2" />
Home
</NavLink>
</li>
<hr/>
<span className="pl-3" style={{"textAlign":"initial"}}>
<Collapsible className ="pl-1 fa fa" trigger={<UserIcon/>}>
<Nav vertical className="list-unstyled">
<ul style={{"padding":"0px"}}>
<li className="pl-3">
<NavLink tag={Link} to={"/user-staff"}>
<FontAwesomeIcon icon={faUsers} className="mr-2" />
Staff
</NavLink>
</li>
<li className="pl-3">
<NavLink tag={Link} to={"/user-student"}>
<FontAwesomeIcon icon={faGraduationCap} className="mr-2" />
Student
</NavLink>
</li>
</ul>
</Nav>
</Collapsible>
</span>
<hr/>
<li>
<NavLink tag={Link} to={"/assessment"}>
<FontAwesomeIcon icon={faEdit} className="mr-2"/>
Assessment
</NavLink>
</li>
<hr/>
<li>
<NavLink tag={Link} to={"/Placements"}>
<FontAwesomeIcon icon={faUserGraduate} className="mr-2" />
Placements
</NavLink>
</li>
<hr/>
<li>
<NavLink tag={Link} to={"/IndividualStudentEntry"}>
<FontAwesomeIcon icon={faChalkboardTeacher} className="mr-2" />
Individual student
</NavLink>
</li>
<hr/>
<li>
<NavLink tag={Link} to={"/allstudents"}>
<FontAwesomeIcon icon={faUserEdit} className="mr-2" />
Allstudents
</NavLink>
</li>
<hr/>
<li>
<NavLink tag={Link} to={"/settings"}>
<FontAwesomeIcon icon={faCog} className="mr-2"/>
Settings
</NavLink>
</li>
<hr/>
<li>
<NavLink tag={Link} onClick={ e=>{localStorage.clear();
window.location.href = '/login';}}>
<FontAwesomeIcon icon={faSignOutAlt} className="mr-2" />
Logout
</NavLink>
</li>
<hr/>
</Nav>
</div>
</div>
</div>
)
