@fortawesome/free-solid-svg-icons#faInfoCircle JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faInfoCircle.
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: AlertPanel.jsx From ashteki with GNU Affero General Public License v3.0 | 6 votes |
|
AlertPanel = ({ type = AlertType.Info, title, message, noIcon = false, children }) => {
let icon;
/**
* @type {AlertType}
*/
let alertType;
switch (type) {
case AlertType.Warning:
icon = faExclamationTriangle;
alertType = 'warning';
break;
case AlertType.Danger:
icon = faExclamationCircle;
alertType = 'danger';
break;
case AlertType.Info:
icon = faInfoCircle;
alertType = 'info';
break;
case AlertType.Success:
icon = faCheckCircle;
alertType = 'success';
break;
}
return (
<Alert variant={alertType}>
{title && <Alert.Heading>{title}</Alert.Heading>}
{!noIcon && <FontAwesomeIcon icon={icon} />}
{message && <span id='alert-message'> {getMessageWithLinks(message)}</span>}
{children && <span> {children}</span>}
</Alert>
);
}
Example #2
| Source File: index.js From map33.js with MIT License | 6 votes |
|
render() {
return (
<BottomRight>
<OverlayTrigger trigger="click" placement="top" overlay={popover}>
<FontAwesomeIcon icon={faInfoCircle} size="lg" className="mr-3" />
</OverlayTrigger>
</BottomRight>
)
}
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: Alert.jsx From frontend-app-support-tools with GNU Affero General Public License v3.0 | 6 votes |
|
function getAlertIcon(type) {
if (type === 'error') {
return faExclamationTriangle;
}
if (type === 'danger') {
return faMinusCircle;
}
if (type === 'success') {
return faCheckCircle;
}
return faInfoCircle;
}
Example #5
| Source File: index.js From Webiu with MIT License | 6 votes |
|
About = ({header, mainText, subText, buttonText, buttonLink, image, backgroundColor}) => {
return (
<div className="about-component">
{header ? <div className="header-component">
<h2><FontAwesomeIcon className="icon" icon={faInfoCircle} /> {header}</h2>
</div> : null}
<div className="about-us" style={{backgroundColor: backgroundColor}}>
<Container>
<Row>
<Col md={6} className="left-col">
<div className="about-content-section">
{mainText ? <h1>
<span className='colored-text'>{mainText.split(' ')[0]}</span>
<span>{mainText.split(' ').map((t, i) => i !== 0 ? ' ' + t : null)}</span>
</h1> : null}
<p>{subText}</p>
{buttonText ? <a href={buttonLink} className="button">
{buttonText}
</a> : null}
</div>
</Col>
<Col md={6} className="right-col">
<img className= "about-image" alt="About" src={image} />
</Col>
</Row>
</Container>
</div>
</div>
)
}
Example #6
| Source File: index.js From Webiu with MIT License | 5 votes |
|
Card = ({ header, data, card, services, buttonLink, buttonText }) => {
return (
<div className="card-component">
{header ? <div className="header-component">
<h2>
<FontAwesomeIcon className="icon-h2" icon={card ? faFile : faInfoCircle} /> {header}
</h2>
</div> : null}
<Container>
<Row>
{card && data.map((data, index) => (
<Col lg={4} key={index} className="card-col">
<div className="card-div">
<img src={data.image} className="card-img" alt="logo" />
<hr />
<div className="item-title">
<h4 className="title-text">{data.title}</h4>
</div>
<div className="item-description">
<p>{data.description}</p>
</div>
<div className="btn-center">
<Link to={data.buttonLink} className="btn">
{data.buttonText}
</Link>
</div>
</div>
</Col>
))}
{services && data.map((data, index) => (
<Col lg={4} key={index} className="services-col">
<div className="services-div">
<img src={data.image} className="services-img" alt="logo" />
<div className="services-title">
<h5 className="services-text">{data.title}</h5>
</div>
<div className="services-description">
<p>{data.description}</p>
</div>
</div>
</Col>
))}
</Row>
{services ? <div className="btn-center">
<Link to={buttonLink} className="btn">
{buttonText}
</Link>
</div> : null}
</Container>
</div>
)
}
Example #7
| Source File: fontawesome.js From xmrig-workers with GNU General Public License v3.0 | 5 votes |
|
export default function () {
library.add(faGithub, faWindows, faLinux, faTwitter, faReddit, faTelegram, faCheckCircle, faMicrochip, faTrashAlt,
faPaperPlane, faSpinner, faFlask, faInfoCircle, faPen, faTools, faCheck, faPlus, faCog, faExclamationTriangle,
faQuestionCircle, faSyncAlt, faInfinity, faDownload, faCopy, faPlug, faTimesCircle);
}
Example #8
| Source File: Register.js From citu-api with MIT License | 4 votes |
|
Register = () => {
const userRef = useRef();
const errRef = useRef();
const [user, setUser] = useState('');
const [validName, setValidName] = useState(false);
const [userFocus, setUserFocus] = useState(false);
const [pwd, setPwd] = useState('');
const [validPwd, setValidPwd] = useState(false);
const [pwdFocus, setPwdFocus] = useState(false);
const [matchPwd, setMatchPwd] = useState('');
const [validMatch, setValidMatch] = useState(false);
const [matchFocus, setMatchFocus] = useState(false);
const [errMsg, setErrMsg] = useState('');
const [success, setSuccess] = useState(false);
useEffect(() => {
userRef.current.focus();
}, [])
useEffect(() => {
setValidName(USER_REGEX.test(user));
}, [user])
useEffect(() => {
setValidPwd(PWD_REGEX.test(pwd));
setValidMatch(pwd === matchPwd);
}, [pwd, matchPwd])
useEffect(() => {
setErrMsg('');
}, [user, pwd, matchPwd])
const handleSubmit = async (e) => {
e.preventDefault();
// if button enabled with JS hack
const v1 = USER_REGEX.test(user);
const v2 = PWD_REGEX.test(pwd);
if (!v1 || !v2) {
setErrMsg("Invalid Entry");
return;
}
try {
const response = await axios.post(REGISTER_URL,
JSON.stringify({ user, pwd }),
{
headers: { 'Content-Type': 'application/json' },
withCredentials: true
}
);
// TODO: remove console.logs before deployment
console.log(JSON.stringify(response?.data));
//console.log(JSON.stringify(response))
setSuccess(true);
//clear state and controlled inputs
setUser('');
setPwd('');
setMatchPwd('');
} catch (err) {
if (!err?.response) {
setErrMsg('No Server Response');
} else if (err.response?.status === 409) {
setErrMsg('Username Taken');
} else {
setErrMsg('Registration Failed')
}
errRef.current.focus();
}
}
return (
<>
{success ? (
<section>
<h1>Success!</h1>
<p>
<a href="#">Sign In</a>
</p>
</section>
) : (
<section>
<p ref={errRef} className={errMsg ? "errmsg" : "offscreen"} aria-live="assertive">{errMsg}</p>
<h1>Register</h1>
<form onSubmit={handleSubmit}>
<label htmlFor="username">
Username:
<FontAwesomeIcon icon={faCheck} className={validName ? "valid" : "hide"} />
<FontAwesomeIcon icon={faTimes} className={validName || !user ? "hide" : "invalid"} />
</label>
<input
type="text"
id="username"
ref={userRef}
autoComplete="off"
onChange={(e) => setUser(e.target.value)}
value={user}
required
aria-invalid={validName ? "false" : "true"}
aria-describedby="uidnote"
onFocus={() => setUserFocus(true)}
onBlur={() => setUserFocus(false)}
/>
<p id="uidnote" className={userFocus && user && !validName ? "instructions" : "offscreen"}>
<FontAwesomeIcon icon={faInfoCircle} />
4 to 24 characters.<br />
Must begin with a letter.<br />
Letters, numbers, underscores, hyphens allowed.
</p>
<label htmlFor="password">
Password:
<FontAwesomeIcon icon={faCheck} className={validPwd ? "valid" : "hide"} />
<FontAwesomeIcon icon={faTimes} className={validPwd || !pwd ? "hide" : "invalid"} />
</label>
<input
type="password"
id="password"
onChange={(e) => setPwd(e.target.value)}
value={pwd}
required
aria-invalid={validPwd ? "false" : "true"}
aria-describedby="pwdnote"
onFocus={() => setPwdFocus(true)}
onBlur={() => setPwdFocus(false)}
/>
<p id="pwdnote" className={pwdFocus && !validPwd ? "instructions" : "offscreen"}>
<FontAwesomeIcon icon={faInfoCircle} />
8 to 24 characters.<br />
Must include uppercase and lowercase letters, a number and a special character.<br />
Allowed special characters: <span aria-label="exclamation mark">!</span> <span aria-label="at symbol">@</span> <span aria-label="hashtag">#</span> <span aria-label="dollar sign">$</span> <span aria-label="percent">%</span>
</p>
<label htmlFor="confirm_pwd">
Confirm Password:
<FontAwesomeIcon icon={faCheck} className={validMatch && matchPwd ? "valid" : "hide"} />
<FontAwesomeIcon icon={faTimes} className={validMatch || !matchPwd ? "hide" : "invalid"} />
</label>
<input
type="password"
id="confirm_pwd"
onChange={(e) => setMatchPwd(e.target.value)}
value={matchPwd}
required
aria-invalid={validMatch ? "false" : "true"}
aria-describedby="confirmnote"
onFocus={() => setMatchFocus(true)}
onBlur={() => setMatchFocus(false)}
/>
<p id="confirmnote" className={matchFocus && !validMatch ? "instructions" : "offscreen"}>
<FontAwesomeIcon icon={faInfoCircle} />
Must match the first password input field.
</p>
<button disabled={!validName || !validPwd || !validMatch ? true : false}>Sign Up</button>
</form>
<p>
Already registered?<br />
<span className="line">
<Link to="/">Sign In</Link>
</span>
</p>
</section>
)}
</>
)
}
