@fortawesome/free-solid-svg-icons#faExternalLinkAlt JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faExternalLinkAlt.
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: artcoursedetail.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 6 votes |
|
ArtCourseDetail = ({ className }) => {
const currikiUtility = classNames("curriki-utility-artcourse", className);
return (
<div className={currikiUtility}>
<div className="artcourse-img">
<img src={ArtCourseImage} alt="ArtCourseImage" />
</div>
<div className="artcourse-detail">
<HeadingThree text="Description" color="#084892" />
<HeadingText
text="Ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur."
color="#515151"
className="artcourse-description"
/>
<div className="artcourse-links-icons">
<div className="link-icons">
<a href="#" className="artcourse_link">
<FontAwesomeIcon
icon={faExternalLinkAlt}
className="artcourse-icon"
/>
Share project
</a>
<a href="#" className="artcourse_link">
<FontAwesomeIcon icon={faEye} className="artcourse-icon" />
Preview
</a>
<a href="#" className="artcourse_link">
<FontAwesomeIcon icon={faTrashAlt} className="artcourse-icon" />
Delete
</a>
</div>
</div>
</div>
</div>
);
}
Example #2
| Source File: PathwayCreated.js From pathways with GNU General Public License v3.0 | 6 votes |
|
CreatedContainer = props => {
return(
<div className='createdContainer'>
<div className='createdDescription'>
<div className='createdHeader'>
<div className='createdTitle'>{props.data.topic}</div>
<div><FontAwesomeIcon icon={faExternalLinkAlt} /></div>
</div>
<div className='createdBody'>
{props.data.description}
</div>
<div className='createdFooter'>
<div className='createdTags'>
<PathwayTags tags={props.data.tags} />
</div>
<div className='createdTime'>Last Updated {props.data.lastUpdated} ago</div>
</div>
</div>
<div className='createdStats'>
<div className='createdStat'>
<span>{props.data.steps}</span>
<span>Steps</span>
</div>
<div className='createdStat'>
<span>{props.data.haveDone}</span>
<span>Have Done</span>
</div>
<div className='createdStat'>
<span>{props.data.supported}</span>
<span>Pathways Supported</span>
</div>
</div>
</div>
)
}
Example #3
| Source File: index.js From Webiu with MIT License | 6 votes |
|
LinksList = ({links, isIcon, iconName}) => {
return (
<div className="links-list-component">
{links ? (
<ul>
{links.map((link, i) => (
<li key={`${link.url}-${i}`}>
<span>{link.name}</span>: <a href={link.url} target="_blank" rel="noreferrer"> {link.url} {isIcon ? <FontAwesomeIcon icon={faExternalLinkAlt} /> : null}</a>
</li>
))}
</ul>
) : <p>No links found!</p>}
</div>
)
}
Example #4
| Source File: index.js From Webiu with MIT License | 6 votes |
|
NavBar = ({logo, links = [], logoStyle}) => {
return (
<div className="nav-bar-component ">
<Navbar className="nav-bar-custom" expand="lg">
<div className="logo-container" style={logoStyle}>
<a href="/">
<img className="logo" src={logo} alt="logo"/>
</a>
</div>
<Navbar.Toggle aria-controls="basic-navbar-nav" className="toggle"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="justify-content-end" style={{width: "100%"}}>
{links.map((link) => !link.isExternal ? (
<Nav.Link
key={link.path}
to={link.path}
className={link.isSpecial ? "special" : ""}
style={{backgroundColor: null}}
>
{link.name}
</Nav.Link>
) : (
<Nav.Link
href={link.path}
target="_blank"
className={link.isSpecial ? "special" : ""}
>
{link.name} <FontAwesomeIcon icon={faExternalLinkAlt} className="nav-icon"/>
</Nav.Link>
))}
</Nav>
</Navbar.Collapse>
</Navbar>
</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: Help.js From covid-19-tracker with MIT License | 5 votes |
|
render() {
const { classes } = this.props;
const res = this.state.currentResources.map((object) => {
for (const key in object) {
if (object.hasOwnProperty(key)) {
for (const key2 in object[key]) {
if (object[key].hasOwnProperty(key2)) {
const result = object[key][key2].map((resource) => (
<FadeIn
key={resource.phonenumber.split(0, 5)}
className={classes.card}
>
<div className={classes.header}>
<h3 className={classes.cardHeading}>{resource.category}</h3>
<a
className={classes.cardLink}
href={resource.contact}
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon
icon={faExternalLinkAlt}
className={classes.icons}
/>
</a>
</div>
<div className={classes.content}>
<p className={classes.text}>
Organization: {resource.nameoftheorganisation}
</p>
<p className={classes.text}>
Contact: {resource.phonenumber}
</p>
</div>
</FadeIn>
));
return result;
}
}
}
}
return null;
});
return (
<div className={classes.help}>
<h1 className={classes.mainHeading}>
Search for Essentials and Services
</h1>
<Form
handleQuery={this.handleQuery}
handleLoading={this.handleLoading}
/>
{this.state.loadingStatus === 'loading' && (
<div className={classes.container}>
<Placeholder />
<Placeholder />
<Placeholder />
</div>
)}
{this.state.loadingStatus === 'completeLoading' && (
<div className={classes.container}>{res}</div>
)}
</div>
);
}
Example #7
| Source File: globalStyle.js From bartzalewski.com-v2 with MIT License | 5 votes |
|
library.add(fab, faEnvelope, faPaperclip, faExternalLinkAlt, faFire, faCross)
Example #8
| Source File: organization.js From climatescape.org with MIT License | 5 votes |
|
function SocialLinksSection({ org, className }) {
return (
<SidebarSectionList title="Links" className={className}>
{org.homepage && (
<SidebarSectionList.Item
text="Homepage"
href={org.homepage}
icon={faExternalLinkAlt}
/>
)}
{org.crunchbase && (
<SidebarSectionList.Item
text="Crunchbase"
href={org.crunchbase}
icon={faExternalLinkAlt}
/>
)}
{org.linkedIn && (
<SidebarSectionList.Item
text="LinkedIn"
href={org.linkedIn}
icon={faLinkedin}
/>
)}
{org.twitter && (
<SidebarSectionList.Item
text={parseTwitterHandle(org.twitter) || "Twitter"}
href={org.twitter}
icon={faTwitter}
/>
)}
{org.facebook && (
<SidebarSectionList.Item
text="Facebook"
href={org.facebook}
icon={faFacebook}
/>
)}
</SidebarSectionList>
)
}
Example #9
| Source File: organization.js From goodhere with MIT License | 5 votes |
|
function SocialLinksSection({ org, className }) {
return (
<SidebarSectionList title="Links" className={className}>
{org.homepage && (
<SidebarSectionList.Item
text="Homepage"
href={org.homepage}
icon={faExternalLinkAlt}
/>
)}
{org.crunchbase && (
<SidebarSectionList.Item
text="Crunchbase"
href={org.crunchbase}
icon={faExternalLinkAlt}
/>
)}
{org.linkedIn && (
<SidebarSectionList.Item
text="LinkedIn"
href={org.linkedIn}
icon={faLinkedin}
/>
)}
{org.twitter && (
<SidebarSectionList.Item
text={parseTwitterHandle(org.twitter) || "Twitter"}
href={org.twitter}
icon={faTwitter}
/>
)}
{org.facebook && (
<SidebarSectionList.Item
text="Facebook"
href={org.facebook}
icon={faFacebook}
/>
)}
</SidebarSectionList>
)
}
Example #10
| Source File: globalStyle.js From personal-site with MIT License | 5 votes |
|
library.add(fab, faEnvelope, faPaperclip, faExternalLinkAlt, faFire, faCross)
Example #11
| Source File: Tables.js From volt-react-dashboard with MIT License | 5 votes |
|
CommandsTable = () => {
const TableRow = (props) => {
const { name, usage = [], description, link } = props;
return (
<tr>
<td className="border-0" style={{ width: '5%' }}>
<code>{name}</code>
</td>
<td className="fw-bold border-0" style={{ width: '5%' }}>
<ul className="ps-0">
{usage.map(u => (
<ol key={u} className="ps-0">
<code>{u}</code>
</ol>
))}
</ul>
</td>
<td className="border-0" style={{ width: '50%' }}>
<pre className="m-0 p-0">{description}</pre>
</td>
<td className="border-0" style={{ width: '40%' }}>
<pre><Card.Link href={link} target="_blank">Read More <FontAwesomeIcon icon={faExternalLinkAlt} className="ms-1" /></Card.Link></pre>
</td>
</tr>
);
};
return (
<Card border="light" className="shadow-sm">
<Card.Body className="p-0">
<Table responsive className="table-centered rounded" style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
<thead className="thead-light">
<tr>
<th className="border-0" style={{ width: '5%' }}>Name</th>
<th className="border-0" style={{ width: '5%' }}>Usage</th>
<th className="border-0" style={{ width: '50%' }}>Description</th>
<th className="border-0" style={{ width: '40%' }}>Extra</th>
</tr>
</thead>
<tbody>
{commands.map(c => <TableRow key={`command-${c.id}`} {...c} />)}
</tbody>
</Table>
</Card.Body>
</Card>
);
}
Example #12
| Source File: index.js From dnp-website with MIT License | 4 votes |
|
render() {
const descriptions = this.props.datasetInfo.Description || []
const compositions = this.props.datasetInfo.Composition || []
const provenances = this.props.datasetInfo.Provenance || []
const collections = this.props.datasetInfo.Collection || []
const managements = this.props.datasetInfo.Management || []
return (
<>
<ScrollButton />
<div className={styles.flexbox}>
<h3 className={styles.datasetTitle}>Dataset Information</h3>
<span className={styles.datasetUnderlineBold}></span>
</div>
<Element id={"Description-title"}> </Element>
<p className={styles.datasetParagraph}>
Information about the ongoing management of the dataset, such as how
the data will be maintained, updated, and the best contact for
further inquiries.
</p>
<p className={styles.datasetParagraph}>
The categories and questions that comprise this section are drawn from
the terrific work of many teams; we have drawn heavily on the work of{' '}
<a href="https://arxiv.org/abs/1803.09010" target="_blank" rel="noreferrer">
Datasheets for Datasets <FontAwesomeIcon icon={faExternalLinkAlt} />
</a>,
and supplemented that with work by{' '}
<a href="https://ai-global.org/" target="_blank" rel="noreferrer">
AI Global <FontAwesomeIcon icon={faExternalLinkAlt} />
</a>,{' '}
<a href="http://data.world/" target="_blank" rel="noreferrer">
data.world <FontAwesomeIcon icon={faExternalLinkAlt} />
</a>, and{' '}
<a href="https://deon.drivendata.org/" target="_blank" rel="noreferrer">
DrivenData <FontAwesomeIcon icon={faExternalLinkAlt} />
</a>.
We further refined this section based on feedback from colleagues at the
Department of Education, AI Global, and Memorial Sloan Kettering.
</p>
<span className={styles.datasetUnderlineBold}></span>
<h3 className={styles.datasetSubHeader}>Description</h3>
<ol className={styles.datasetOl}>
{descriptions.map(description => (
<li className={styles.datasetLi}>
{description.question}
{description.type === "markdown" ? (
<ReactMarkdown
className={styles.datasetMrkdwn}
children={description.answer || description.content}
/>
) : (
""
)}
</li>
))}
</ol>
<Element id={"Composition-title"}> </Element>
<span className={styles.datasetUnderline}></span>
<h3 className={styles.datasetSubHeader}>Composition</h3>
<ol className={styles.datasetOl}>
{compositions.map(composition => (
<li className={styles.datasetLi}>
{composition.question}
{composition.type === "markdown" ? (
<ReactMarkdown
className={styles.datasetMrkdwn}
children={composition.answer || composition.content}
/>
) : (
""
)}
</li>
))}
</ol>
<Element id={"Provenance-title"}> </Element>
<span className={styles.datasetUnderline}></span>
<h3 className={styles.datasetSubHeader}>Provenance</h3>
<ol className={styles.datasetOl}>
{provenances.map(provenance => (
<li className={styles.datasetLi}>
{provenance.question}
{provenance.type === "markdown" ? (
<ReactMarkdown
className={styles.datasetMrkdwn}
children={provenance.answer || provenance.content}
/>
) : (
""
)}
</li>
))}
</ol>
<Element id={"Collection-title"}></Element>
<span className={styles.datasetUnderline}></span>
<h3 className={styles.datasetSubHeader}>Collection</h3>
<ol className={styles.datasetOl}>
{collections.map(collection => (
<li className={styles.datasetLi}>
{collection.question}
{collection.type === "markdown" ? (
<ReactMarkdown
className={styles.datasetMrkdwn}
children={collection.answer || collection.content}
/>
) : (
""
)}
</li>
))}
</ol>
<Element id={"Management-title"}> </Element>
<span className={styles.datasetUnderline}></span>
<h3 className={styles.datasetSubHeader}>Management</h3>
<ol className={styles.datasetOl}>
{managements.map(management => (
<li className={styles.datasetLi}>
{management.question}
{management.type === "markdown" ? (
<ReactMarkdown
className={styles.datasetMrkdwn}
children={management.answer || management.content}
/>
) : (
""
)}
</li>
))}
</ol>
<span className={styles.datasetUnderline}></span>
</>
)
}
