@fortawesome/free-solid-svg-icons#faPhone JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faPhone.
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: TopBanner.js From clayma-store with MIT License | 6 votes |
|
export default function TopBanner() {
return (
<div className="top-banner-container">
<div className="row">
<div className="col-lg-3">
<FontAwesomeIcon icon={faPhone} className="top-banner-icon" />
+0199999999
</div>
<div className="col-lg-3">
<FontAwesomeIcon icon={faEnvelope} className="top-banner-icon" />
[email protected]
</div>
<div className="col-lg-6">
On sale now up to 50% off!
<Link to="/shop" className="shop_now_link_top_banner">
Shop now
</Link>
</div>
</div>
</div>
);
}
Example #2
| 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 #3
| Source File: icons_library.js From official-website-backend with MIT License | 5 votes |
|
// Adding all the icons we need in the project
library.add(faHeart, faFire, faPalette, faMapPin, faMapMarker, faPhone, faMailBulk);
Example #4
| Source File: index.js From gatsby-markdown-personal-website with MIT License | 5 votes |
|
/* add any additional icon to the library */
library.add(fab, faLaptopCode, faDrawPolygon, faEdit, faEdit, faBullhorn, faMapMarkerAlt, faPhone, faPaperPlane);
Example #5
| Source File: SystemIcons.jsx From gatsby-startbootstrap-agency with MIT License | 5 votes |
|
PhoneIcon = makeFAIcon(faPhone)
Example #6
| Source File: Footer.js From clayma-store with MIT License | 4 votes |
|
export default function Footer() {
const date = new Date();
const dateyear = date.getFullYear();
return (
<div className="main-footer">
<div className="main-footer-container">
<div className="main-footer-content">
<div className="row">
<div className="col-lg-4">
<h2>Clayma store</h2>
<p>
We are providing high quality services with 100% satisfaction
guarantee.
</p>
<div className="main-footer-payment">
<ul>
<li>
<a href="/">
<img
src={AmericanexpressCardIcon}
alt="americaExpress"
/>
</a>
</li>
<li>
<a href="/">
<img src={CirrusCardIcon}
alt="CirrusCardIcon" />
</a>
</li>
<li>
<a href="/">
<img
src={MaterCardCardIcon}
alt="MaterCardCardIcon"
/>
</a>
</li>
<li>
<a href="/">
<img src={PaypalCardIcon}
alt="PaypalCardIcon" />
</a>
</li>
<li>
<a href="/">
<img src={VisaCardIcon} alt="VisaCardIcon" />
</a>
</li>
</ul>
</div>
</div>
<div className="col-lg-4">
<h2>Contact us</h2>
<h5>
<FontAwesomeIcon icon={faMapMarker} className="footer-icons" />
Empire Road, Somewhere , on Earth
</h5>
<h5>
<FontAwesomeIcon icon={faPhone} className="footer-icons" />{" "}
+2111 555 555 54
</h5>
<h5>
<FontAwesomeIcon icon={faEnvelope} className="footer-icons" />{" "}
[email protected]
</h5>
<h5>
<FontAwesomeIcon icon={faGlobe} className="footer-icons" />{" "}
www.claymastore.com
</h5>
<h3> Customer Care</h3>
<h5>
<FontAwesomeIcon icon={faClock} className="footer-icons" /> Mon.
- Fri. 8am to 5pm
</h5>
<h5>
<FontAwesomeIcon icon={faClock} className="footer-icons" /> Sat.
8am to 11am
</h5>
<h5>
<FontAwesomeIcon icon={faClock} className="footer-icons" /> Sun.
<span> Closed</span>
</h5>
</div>
<div className="col-lg-4">
<h2>My Account</h2>
<h5>Shopping Cart</h5>
<h5>My Account</h5>
<h5>Checkout</h5>
<h5>Delivery</h5>
<h5>Your Orders</h5>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12 main-footer-copyright">
<p>Copyright © {dateyear}. All Right reserved.</p>
<hr />
</div>
</div>
</div>
</div>
);
}
