@fortawesome/free-brands-svg-icons#faLinkedin JavaScript Examples
The following examples show how to use
@fortawesome/free-brands-svg-icons#faLinkedin.
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: Social.js From Next.js-e-commerce-online-store with MIT License | 6 votes |
|
export default function Social() {
return (
<div>
<form>
<label htmlFor="email">Subscribe to the news!</label>
<input type="email" size="20" id="email" />
<input type="submit" value="Submit"></input>
</form>
<div>
<div>Our social media:</div>
<Link href="/#">
<a aria-label="Facebook icon link"><FontAwesomeIcon icon={faFacebook} size="2x" /></a>
</Link>
<Link href="/#">
<a aria-label="Twitter icon link"><FontAwesomeIcon icon={faTwitter} size="2x" /></a>
</Link>
<Link href="/#">
<a aria-label="Instagram icon link"><FontAwesomeIcon icon={faInstagram} size="2x" /></a>
</Link>
<Link href="/#">
<a aria-label="YouTube icon link"><FontAwesomeIcon icon={faYoutube} size="2x" /></a>
</Link>
<Link href="/#">
<a aria-label="LinkedIn icon link"><FontAwesomeIcon icon={faLinkedin} size="2x" /></a>
</Link>
</div>
<div>© 1991 - {new Date().getFullYear()} All rights reserved.</div>
</div>
)
}
Example #2
| Source File: index.js From official-website-backend with MIT License | 6 votes |
|
/**
* Component which contains social media links for Energia Powered
*
* @component
* @returns {JSX} Footer Component
*/
function Footer() {
let socialData = [
{ link: "https://www.facebook.com/Energia.Powered/", label: faFacebook },
{
link: "https://www.youtube.com/channel/UCxNgZOJJx9LzqWLhCEu8Djw",
label: faYoutube
},
{ link: "https://www.instagram.com/energia.powered/", label: faInstagram },
{ link: "https://twitter.com/Energia_Powered", label: faTwitter },
{
link: "https://www.linkedin.com/company/energiapowered/",
label: faLinkedin
}
];
const [social] = useState(socialData);
return (
<footer id="Footer">
<ul className="text-center social-links row list-unstyled">
{social.length > 0 &&
social.map(item => {
return (
<li key={item.link} className="social-links-item col-xs-2">
{/* noopener & nopreferrer to prevent vulnerbilities */}
<a target="_blank" rel="noopener noreferrer" href={item.link}>
<FontAwesomeIcon icon={item.label} />
</a>
</li>
);
})}
</ul>
</footer>
);
}
Example #3
| Source File: Landing.js From Personal-Portfolio with MIT License | 6 votes |
|
render() {
return (
<section className="resume-section p-3 p-lg-5 d-flex align-items-center" id="about">
<div className="w-100">
<h1 className="mb-0">{this.landingData.firstName}
<span className="text-primary">{this.landingData.lastName}</span>
</h1>
<div className="subheading mb-5">{this.landingData.phoneNumber} ·
<a href="mailto:[email protected]">{this.landingData.email}</a>
</div>
<p className="lead mb-5">{this.landingData.bio}</p>
<div className="social-icons">
<a href={this.landingData.linkedin}>
<FontAwesomeIcon icon={faLinkedin} />
</a>
<a href={this.landingData.github}>
<FontAwesomeIcon icon={faGithub} />
</a>
</div>
</div>
</section>
);
}
Example #4
| Source File: TitleBar.js From aava.sh with MIT License | 6 votes |
|
function TitleBar() {
const closeWindow = () => {
window.close();
}
return (
<TitleBarDiv>
<ButtonsDiv>
<CloseButton onClick={closeWindow}>X</CloseButton>
</ButtonsDiv>
<TitleDiv>
<a href='https://github.com/aavshr/aava.sh'>aava.sh</a>
</TitleDiv>
<LinksDiv>
<a href="https://github.com/aavshr">
<FontAwesomeIcon icon={faGithub}/>
</a>
<a href="https://twitter.com/aav_shr">
<FontAwesomeIcon icon={faTwitter}/>
</a>
<a href="https://linkedin.com/in/aavshr">
<FontAwesomeIcon icon={faLinkedin}/>
</a>
<a href="mailto:[email protected]">
<FontAwesomeIcon icon={faEnvelope}/>
</a>
</LinksDiv>
</TitleBarDiv>
);
}
Example #5
| Source File: Footer.jsx From signdocs with MIT License | 6 votes |
|
Footer = () => {
return (
<footer id="footer">
<div className="flex-row-container flex-center small smallest">
<div className="footer-links">
<a href="https://github.com/philgresh/">
<FontAwesomeIcon icon={faGithub} color="inherit" />
</a>
<a href="https://www.linkedin.com/in/philgresham">
<FontAwesomeIcon icon={faLinkedin} color="inherit" />
</a>
<a href="https://gresham.dev">
<FontAwesomeIcon icon={faHome} color="inherit" />
</a>
<EmailObfuscation>
<FontAwesomeIcon icon={faEnvelope} color="inherit" />
</EmailObfuscation>
<a href="https://github.com/philgresh/signdocs">
<FontAwesomeIcon icon={faCodeBranch} color="inherit" />
</a>
</div>
</div>
</footer>
);
}
Example #6
| Source File: index.js From Webiu with MIT License | 6 votes |
|
Footer = ({mainText, socialLinks = {} }) => {
const {
facebook,
gitter,
twitter,
github,
linkedin,
medium
} = socialLinks
return (
<div className="footer-component">
<Container>
<Row>
<Col>
<div className="social-icons-container">
{!facebook || <a href={facebook}><FontAwesomeIcon icon={faFacebook} className="icon" /></a>}
{!gitter || <a href={gitter}><FontAwesomeIcon icon={faGitter} className="icon" /></a>}
{!medium || <a href={medium}><FontAwesomeIcon icon={faMedium} className="icon" /></a>}
{!twitter || <a href={twitter}><FontAwesomeIcon icon={faTwitter} className="icon" /></a>}
{!github || <a href={github}><FontAwesomeIcon icon={faGithub} className="icon" /></a>}
{!linkedin || <a href={linkedin}><FontAwesomeIcon icon={faLinkedin} className="icon" /></a>}
</div>
<p className="main-text">{mainText} {(new Date().getFullYear())}</p>
</Col>
</Row>
</Container>
</div>
)
}
Example #7
| Source File: FooterSmall.js From Frontend with Apache License 2.0 | 5 votes |
|
function FooterSmall() {
const [showFooter, setShowFooter] = useState(false)
window.addEventListener('scroll', (e) => {
myFunction()
})
function myFunction() {
// console.log(window.pageYOffset);
if (window.pageYOffset < 100) {
setShowFooter(false)
} else {
setShowFooter(true)
}
}
return (
<div
id="myfooter"
className={`footerSmall m-0 ${
showFooter || window.pageYOffset === 0 ? '' : 'hide'
}`}
>
<div className="container-fluid p-4 m-0">
<div className="row justify-content-center">
<div className="col-6 col-sm-6">
<p
style={{
fontSize: '18px',
padding: '0px',
margin: '0px',
}}
>
© Copyright Codedigger 2021
</p>
</div>
<div className="col-6 col-sm-6 m-0">
<div className="float-right m-0">
<a
className="social_media"
target="_blank"
href="https://www.facebook.com/practicewithcodedigger"
>
<FontAwesomeIcon icon={faFacebook} size="2x" />
</a>
<a
className="social_media"
target="_blank"
href="https://www.linkedin.com/company/codedigger"
>
<FontAwesomeIcon icon={faLinkedin} size="2x" />
</a>
<a
className="social_media"
target="_blank"
href="https://github.com/Code-dig-ger"
>
<FontAwesomeIcon icon={faGithub} size="2x" />
</a>
<a
className="social_media"
target="_blank"
href="https://www.youtube.com/channel/UCY5XRYpEGKT9cpzZmfWvh6A"
>
<FontAwesomeIcon icon={faYoutube} size="2x" />
</a>
</div>
</div>
</div>
</div>
</div>
)
}
Example #8
| Source File: index.js From gatsby-blog-mdx with MIT License | 5 votes |
|
Header = ({ siteTitle, showTitle, isPostTemplate }) => {
return (
<StyledMainHeader className="main-header">
{/* Google AdSense */}
{config.googleAdSenseId && config.googleAdSenseId !== "" && (
<script
data-ad-client={config.googleAdSenseId}
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
></script>
)}
{isPostTemplate && config.useScrollIndicator && <ProgressBar />}
<StyledMainHeaderInner className="main-header-inner">
<h1 style={{ fontSize: "1.5rem" }}>
{showTitle && <Link to="/">{`${siteTitle}`}</Link>}
</h1>
<StyledMediaIcons>
<HeaderIcon
accountInfo={config.socialMediaLinks.email}
mediaName={"email"}
preHref={"mailto:"}
icon={faEnvelope}
/>
<HeaderIcon
accountInfo={config.socialMediaLinks.github}
mediaName={"github"}
preHref={"https://github.com/"}
icon={faGithub}
/>
<HeaderIcon
accountInfo={config.socialMediaLinks.facebook}
mediaName={"facebook"}
preHref={"https://facebook.com/"}
icon={faFacebook}
/>
<HeaderIcon
accountInfo={config.socialMediaLinks.instagram}
mediaName={"instagram"}
preHref={"https://instagram.com/"}
icon={faInstagram}
/>
<HeaderIcon
accountInfo={config.socialMediaLinks.twitter}
mediaName={"twitter"}
preHref={"https://twitter.com/"}
icon={faTwitter}
/>
<HeaderIcon
accountInfo={config.socialMediaLinks.linkedIn}
mediaName={"linkedin"}
preHref={"https://linkedin.com/"}
icon={faLinkedin}
/>
<HeaderIcon
accountInfo={config.socialMediaLinks.medium}
mediaName={"medium"}
preHref={"https://medium.com/@"}
icon={faMedium}
/>
</StyledMediaIcons>
</StyledMainHeaderInner>
</StyledMainHeader>
)
}
Example #9
| 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 #10
| 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 #11
| Source File: links.js From yezz.me with MIT License | 5 votes |
|
export default function Links() {
return (
<ul className="list-group list-group-horizontal">
<li className="list-group-item">
<a
href="mailto:[email protected]"
target="_blank"
rel="noreferrer"
alt="email link"
>
<FontAwesomeIcon icon={faEnvelope} />
</a>
</li>
<li className="list-group-item">
<a
href="https://github.com/yezz123"
target="_blank"
rel="noreferrer"
alt="github link"
>
<FontAwesomeIcon icon={faGithub} />
</a>
</li>
<li className="list-group-item">
<a
href="https://linkedin.com/in/yezz123"
target="_blank"
rel="noreferrer"
alt="linkedin link"
>
<FontAwesomeIcon icon={faLinkedin} />
</a>
</li>
<li className="list-group-item">
<a
href="https://twitter.com/THyasser1"
target="_blank"
rel="noreferrer"
alt="twitter link"
>
<FontAwesomeIcon icon={faTwitter} />
</a>
</li>
</ul>
)
}
Example #12
| Source File: footer.js From Frontend with Apache License 2.0 | 4 votes |
|
//FUCNTIONAL COMPONENT
function Footer() {
return (
<div className="footer">
<div className="container">
<div className="row justify-content-center">
<div className="col-6 col-sm-3">
<h5>Links</h5>
<br />
<ul className="list-unstyled">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/aboutus">About</Link>
</li>
<li>
<Link to="/privacy">Privacy Policy</Link>
</li>
<li>
<Link to="/terms">Terms of Service</Link>
</li>
</ul>
</div>
<div className="col-12 col-sm-3 contactUs">
<h5>Contact Us</h5>
<br />
<div>
<FontAwesomeIcon icon={faEnvelope} size="md" /> :{' '}
<a href="mailto:[email protected]">
[email protected]
</a>
</div>
<a href="https://forms.gle/cL9ECdGDf6njYhV66" target="_blank">
Feedback
</a>
</div>
<div className="col-12 col-sm-3">
<div>
<h5>Follow Us</h5>
<br />
<a
target="_blank"
className="social_media"
href="https://www.facebook.com/practicewithcodedigger"
>
<FontAwesomeIcon icon={faFacebook} size="2x" />
</a>
<a
target="_blank"
className="social_media"
href="https://www.linkedin.com/company/codedigger"
>
<FontAwesomeIcon icon={faLinkedin} size="2x" />
</a>
<a
target="_blank"
className="social_media"
href="https://github.com/Code-dig-ger"
>
<FontAwesomeIcon icon={faGithub} size="2x" />
</a>
<a
target="_blank"
className="social_media"
href="https://www.youtube.com/channel/UCY5XRYpEGKT9cpzZmfWvh6A"
>
<FontAwesomeIcon icon={faYoutube} size="2x" />
</a>
</div>
</div>
</div>
<div className="row justify-content-center">
<div className="col-auto">
<p>© Copyright Codedigger 2021</p>
</div>
</div>
</div>
</div>
)
}
Example #13
| Source File: about.js From covidAnalytics with MIT License | 4 votes |
|
export default function About(){
return(
<div className="teste">
<Header/>
<div className="conteudoCardAbout">
<Container fluid={true} >
<Row noGutters={false}>
<Col xs="12" sm="12" md="12" xl="12">
<Card>
<CardBody>
<CardTitle className="titulosAbout">
Quem somos
<hr className="my-2 mb-5" />
</CardTitle>
<p className="my-2 mb-2 aboutexto"> O Grupo de Trabalho C3-Analytics é formado por uma pequena equipe de professores e alunos de
graduação e pós-graduação do Centro de Ciências Computacionais - C3. É parte da frente de ITeCCorona, que desenvolve atividades
de pesquisa, extensão e inovação na Universidade Federal do Rio Grande - FURG sobre COVID-19. </p>
<p className="my-2 mb-2 aboutexto">O principal objetivo do GT C3-Analytics é permitir a visualização e a análise de dados da
COVID-19 nas regiões de abrangência da FURG. A equipe responsável pelo desenvolvimento desta plataforma de coleta e visualização
de dados é detalhada abaixo. </p>
<p className="my-2 mb-5 aboutexto">Estes e outros integrantes do GT ainda atuam de forma conjunta com a prefeitura municipal de
Rio Grande para implantar a plataforma desenvolvida no portal de serviços relacionados à pandemia do novo Coronavírus e na elaboração
de outras análises a serem publicadas no futuro, principalmente ligadas ao sistema de tele-triagem.</p>
<CardTitle className="titulosAbout mb-2">
Equipe de Desenvolvedores
<hr className="my-2 mb-5" />
</CardTitle>
<div className=" text-center ">
<Container>
<Row>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2" >
<img class="fotos" src={eduardo} alt="foto1"/>
<CardTitle className="TituloTime mt-3">Eduardo Borges</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Dr. em Computação. </p>
<p className="my-2 resumoTime">Coordenador do GT C3-Analytics. Professor do Centro de Ciências Computacionais e
do Programa de Pós-Graduação em Computação. Coordenador do Grupo de Pesquisa em Gerenciamento de Informações.
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/5851601274050374">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/enborges/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/enborges">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2" >
<img class="fotos" src={glauber} alt="foto9"/>
<CardTitle className="TituloTime mt-3">Glauber Gonçalves</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Dr. em Ciências Geodésicas </p>
<p className="my-2 resumoTime">Professor do Centro de Ciências Computacionais,
coordenador do Laboratório de Tecnologia da Geoinformação. Atua como pesquisador em Sensoriamento Remoto e Fotogrametria
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/2814370196736373">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
{/* <Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/enborges/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/enborges">
<FontAwesomeIcon icon={faGithub} />
</Button> */}
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="5" >
<img class="fotos" src={gabriel} alt="foto2"/>
<CardTitle className="TituloTime mt-3">Gabriel Lavoura</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Mestrando em Eng.Comp. </p>
<p className="my-2 resumoTime">Empreendedor, trabalha com desenvolvimento há mais de 7 anos,
sendo entusiasta em hardware, desenvolvimento Web e Mobile. Atua como pesquisador nas áreas de
Deep Learning e Data Science.
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/5616548040095346">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/gabriellavoura/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/Gabriellavoura">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
<img class="fotos" src={vanessa} alt="foto3"/>
<CardTitle className="TituloTime mt-3">Vanessa Telles</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Mestranda em Eng.Comp. </p>
<p className="my-2 resumoTime">Entusiasta em Design Digital, empreendedora e
desenvolvedora Web e Mobile desde 2014. Atua como
pesquisadora nas áreas de Data Science e Deep Learning .
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/3565116360523950">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/vanessa-telles-da-silva-8ab4b614a/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/vanessatelles">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
<img class="fotos" src={bruna} alt="foto4"/>
<CardTitle className="TituloTime mt-3">Bruna Guterres</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Mestranda em Eng.Comp. </p>
<p className="my-2 resumoTime">Professora substituta do Centro de Ciências Computacionais - C3.
Entusiasta em Visão Computacional e Aprendizado de Máquina. Membro do grupo NAUTEC desde 2015.
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/2197909913930437">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/bruna-de-vargas-guterres-07888b129/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
{/* <Button className="Headerlinks" color="link" href="https://github.com/luucasrb">
<FontAwesomeIcon icon={faGithub} />
</Button> */}
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
<img class="fotos" src={lucas} alt="foto5"/>
<CardTitle className="TituloTime mt-3">Lucas Ribeiro</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Graduando em Eng.Comp. </p>
<p className="my-2 resumoTime">Atua como pesquisador nas áreas de Data Science
e Blockchain. Entusiasta em Desenvolvimento Web.
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/1491700382158430">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/luucasrb/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/luucasrb">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
<img class="fotos" src={willian} alt="foto6"/>
<CardTitle className="TituloTime mt-3">Willian Lemos</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Graduando em Eng.Comp. </p>
<p className="my-2 resumoTime">Desenvolvedor desde 2015 e entusiasta em Redes Neurais.
Atua como pesquisador nas áreas de Data Science e Engenharia de dados.
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/5429651614061510">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/willian-lemos-4b9121136/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/Willblemos">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
<img class="fotos" src={augusto} alt="foto7"/>
<CardTitle className="TituloTime mt-3">Augusto Lamim</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Graduando em Eng.Comp. </p>
<p className="my-2 resumoTime">Desenvolvedor full-stack, entusiasta em Tecnologia da
Informação.
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/1925430387887371">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/augusto-c%C3%A9sar-lamim-martins-de-oliveira-6b93a5168/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/Lastopsop">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
<img class="fotos" src={felipe} alt="foto8"/>
<CardTitle className="TituloTime mt-3">Felipe Marques</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Graduando em Eng.Comp. </p>
<p className="my-2 resumoTime">Técnico em Informática para Internet pelo IFRS, desenvolvedor
desde 2016.
</p>
<div className="mb-5">
{/* <Button className="Headerlinks" color="link" href="#">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button> */}
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/felipesouzamarques/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/FelpsZMS">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
</Row>
</Container>
</div>
<div>
<Container>
<Row>
<Col md="12" sm="12" xl="12"xs="12" py="5" mx="2">
<CardTitle className="titulosAbout">
Attribution
<hr className="my-2 mb-5" />
</CardTitle>
<p className="my-2 mb-2 aboutexto">Icons made
by <a class="LinkTitle" href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a className="LinkTitle" href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>. </p>
<p className="my-2 mb-2 aboutexto">Icons fonts made
by <a class="LinkTitle" href="https://fontawesome.com/license/free" title="FontAwesome">FontAwesome</a> from <a className="LinkTitle" href="https://fontawesome.com/" title="Flaticon"> www.fontawesome.com/</a>. </p>
<p className="my-2 mb-2 aboutexto">Graphs
by <a class="LinkTitle" href="https://github.com/PaulLeCam/react-leaflet/blob/master/LICENSE" title="FontAwesome">React-leaflet</a> from <a className="LinkTitle" href="https://github.com/PaulLeCam/react-leaflet" title="Flaticon"> https://github.com/PaulLeCam/react-leaflet</a>. </p>
<p className="my-2 mb-2 aboutexto">Maps clusters
by <a class="LinkTitle" href="https://github.com/yuzhva/react-leaflet-markercluster/blob/master/LICENSE" title="FontAwesome">React-leaflet-markercluster</a> from <a className="LinkTitle" href="https://github.com/yuzhva/react-leaflet-markercluster" title="Flaticon"> https://github.com/yuzhva/react-leaflet-markercluster</a>. </p>
</Col>
</Row>
</Container>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
<Footer/>
</div>
);
}
Example #14
| Source File: footer.js From yezz.me with MIT License | 4 votes |
|
render() {
return (
<StaticQuery
query={graphql`
query footerTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<>
<footer>
<div className="container py-4">
<div className="row justify-content-center mt-2">
<ul className="list-style-none">
<li className="list-inline-item ml-2">
<Link
to="header"
className="link"
smooth={true}
role="button"
aria-label="To the top"
>
<FontAwesomeIcon icon={faArrowUp} />
</Link>
</li>
<li className="list-inline-item mr-4" alt="site title">
© {new Date().getFullYear()}{" "}
<a href="/">{data.site.siteMetadata.title}.</a>
</li>
<li className="list-inline-item mr-3">
<a
href="mailto:[email protected]"
target="_blank"
rel="noreferrer"
alt="email"
>
<FontAwesomeIcon icon={faEnvelope} />
</a>
</li>
<li className="list-inline-item mr-3">
<a
href="https://github.com/yezz123"
target="_blank"
rel="noreferrer"
alt="github"
>
<FontAwesomeIcon icon={faGithub} />
</a>
</li>
<li className="list-inline-item mr-3">
<a
href="https://www.linkedin.com/in/yezz123/"
target="_blank"
rel="noreferrer"
alt="linkedin link"
>
<FontAwesomeIcon icon={faLinkedin} />
</a>
</li>
<li className="list-inline-item mr-1">
<a
href="https://twitter.com/THyasser1"
target="_blank"
rel="noreferrer"
alt="twitter link"
>
<FontAwesomeIcon icon={faTwitter} />
</a>
</li>
</ul>
</div>
</div>
</footer>
</>
)}
></StaticQuery>
)
}
