@fortawesome/free-solid-svg-icons#faGlobe JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faGlobe.
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: 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 #2
| Source File: Response.js From Postman-Clone with MIT License | 5 votes |
|
Response = (props) => {
const { tab } = props;
return (
<div className="content__responseContainer">
<div className="content__responeMenu">
<div className="content__responseMenuRow">
<div className="content__responseMenuColumn">
<span className="content__responseMenuOption active">Body</span>
<span className="content__responseMenuOption">Cookies</span>
<span className="content__responseMenuOption">Headers</span>
<span className="content__responseMenuOption">Test Results</span>
</div>
{tab.response.response !== undefined ||
tab.response.status !== undefined ? (
<div className="content__responseMenuColumn">
<span className="content__responseMenuOption">
<FontAwesomeIcon icon={faGlobe} className="mr-2" />
Status :{" "}
<span className="content__greenText">
{tab.response.status === "success"
? "200 OK"
: tab.response.response.status}
</span>
</span>
<span className="content__responseMenuOption">
Time : <span className="content__greenText">2.3 ms</span>
</span>
<span className="content__responseMenuOption">
Size : <span className="content__greenText">400 KB</span>
</span>
<span
className="content__responseMenuOption"
id="saveResponseButton"
>
Save Response <FontAwesomeIcon icon={faCaretDown} />
</span>
</div>
) : null}
</div>
</div>
<br />
<div className="content__JSONViewer">
<ReactJson
src={
tab.response.data !== undefined || tab.response !== undefined
? tab.response.data
: tab.response.response.data
}
/>
</div>
</div>
);
}
Example #3
| Source File: SystemIcons.jsx From gatsby-startbootstrap-agency with MIT License | 5 votes |
|
LanguageIcon = makeFAIcon(faGlobe)
Example #4
| Source File: main.js From sls-app with MIT License | 5 votes |
|
// Font-awesome library
library.add(faImages, faGlobe, faArrowCircleLeft)
Example #5
| 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>
);
}
Example #6
| Source File: DisplayCard.js From gitsetgo with MIT License | 4 votes |
|
DisplayCard = ({ data, repositories }) => {
return (
<div className="container-fluid overcover" style={{ marginBottom: 100 }}>
{data.name ? (
<div>
<ReactToPdf
targetRef={ref}
filename="resume_github.pdf"
options={options}
scale={0.7}
>
{({ toPdf }) => (
<button
style={{ marginLeft: 20, marginTop: 20 }}
className="ui red button"
type="submit"
onClick={toPdf}
>
<FontAwesomeIcon icon={faThumbsUp}></FontAwesomeIcon> Generate
Pdf
</button>
)}
</ReactToPdf>
<div className="container profile-box" ref={ref}>
<div className="row">
<div className="col-md-4 left-co">
<div className="left-side">
<div className="profile-info">
<img
src={data.avatar_url}
alt={data.avatar_url}
style={{ marginTop: 30 }}
></img>{" "}
<h3>{data.name}</h3>
</div>
<h4 className="ltitle">Contact</h4>
{data.email ? (
<div className="contact-box pb0">
<div className="icon">
<i className="fas fa-phone"></i>
<div className="detail">{data.email}</div>
</div>
</div>
) : (
<div> </div>
)}
<div className="contact-box pb0">
<div className="icon">
<FontAwesomeIcon icon={faGlobe}></FontAwesomeIcon>
</div>
<div className="detail">{data.location}</div>
</div>
<h4 className="ltitle">Twitter</h4>
<ul className="row social-link no-margin">
<li> @{data.twitter_username}</li>
</ul>
<h4 className="ltitle">Organisations</h4>
<div className="refer-cov">
<b>{data.company}</b>
</div>
<h4 className="ltitle">
Followers: <i className="fas fa-pencil-alt"></i>
{data.followers}
</h4>
<h4 className="ltitle">
Following: <i className="fas fa-pencil-alt"></i>
{data.following}
</h4>
<h4 className="ltitle">
Profile created on: <br></br>{" "}
<i className="fas fa-pencil-alt"></i>
{data.created_at}
</h4>
<h4 className="ltitle">
Profile last updated on: <br></br>{" "}
<i className="fas fa-pencil-alt"></i>
{data.updated_at}
</h4>
</div>
</div>
<div className="col-md-8 rt-div">
<div className="rit-cover">
<div className="hotkey">
<h1 className="">{data.name}</h1>
<small>{data.login}</small>
</div>
<h2 className="rit-titl">
<i className="far fa-user"></i>About
</h2>
<div className="about">
<p>{data.bio}</p>
</div>
<h2 className="rit-titl">
<i className="far fa-user"></i>Public Repositories:{" "}
{data.public_repos}{" "}
</h2>
<h2 className="rit-titl">
<i className="far fa-user"></i>Public Gists:{" "}
{data.public_gists}{" "}
</h2>
<h2 className="rit-titl">
<i className="fas fa-briefcase"></i>Repositories
</h2>
<div className="extra content">
<a>
<i className="address card icon"></i>
{repositories.map((repo) => (
<div
classNameName="ui relaxed divided list"
key={repo.name}
>
<div classNameName="item">
<i classNameName="large github middle aligned icon"></i>
<div classNameName="content">
<ul>
<li>
<a
href={repo.html_url}
classNameName="header"
target="_blank"
>
{repo.name}
</a>
</li>
</ul>
</div>
</div>
</div>
))}
</a>
</div>
<h2 className="rit-titl">
<i className="fas fa-graduation-cap"></i>Important Links
</h2>
<div className="education">
<ul className="row no-margin">
<li className="col-md-6">
<span>
Blog:
<spacer />
</span>
{data.blog}
</li>
<li className="col-md-6">
<span>
Github Profile:
<spacer />
</span>
{data.html_url}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
) : (
<div >
<img src={undraw} style={{width: 1500, height: 400, marginTop: 40}}></img>
</div>
)}
</div>
);
}
Example #7
| Source File: TagsBlock.jsx From movies with MIT License | 4 votes |
|
function TagsBlock({ t, data }) {
const {
production_countries, genres, release_date, runtime
} = data;
if (
(production_countries.length < 1) &&
(genres.length < 1) &&
!release_date &&
!runtime
) return null;
const getDuration = (mins) => {
const h = Math.floor(mins / 60);
let m = mins % 60;
m = m < 10 ? `0${m}` : m;
return `${h}${t('movie_details.duration.hours')} ${m}${t('movie_details.duration.minutes')}`;
};
const getReleaseDate = (val) => val.split('-').reverse().join('.');
const mapWithSemicolons = (list) => list.map((item, index) => {
const value = (
<span className="tag-value">
{capitalize(item.name)}
</span>
);
return (
<Fragment key={`${index}_${item.name}`}>
{index !== (list.length - 1)
? (
<>
{value}
<span className={styles.tagSemicolon}>,</span>
</>
)
: value}
</Fragment>
);
});
const tags = [];
const fields = [
{
value: genres, icon: faVideo, func: mapWithSemicolons, cls: styles.tagGenres
},
{
value: production_countries, icon: faGlobe, func: mapWithSemicolons, cls: 'countries'
},
{
value: release_date, icon: faCalendarAlt, func: getReleaseDate, cls: 'release-date'
},
{
value: runtime, icon: faHistory, func: getDuration, cls: 'runtime'
},
];
fields.forEach(({
value, icon, cls, func
}) => {
if (!isEmpty(value)) {
tags.push({ icon, cls, text: func(value) });
}
});
return (
<div className={styles.tagsBlock}>
{tags.map((item, index) => (
<span
key={`${index}_${item.text}`}
className={cn(styles.tagItem, item.cls)}
>
<FontAwesomeIcon
className={styles.tagIcon}
icon={item.icon}
/>
<span className={styles.tagText}>
{item.text}
</span>
</span>
))}
</div>
);
}
