@fortawesome/free-brands-svg-icons#faYoutube JavaScript Examples
The following examples show how to use
@fortawesome/free-brands-svg-icons#faYoutube.
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: footer.js From tmc-wiki with MIT License | 6 votes |
|
Footer = ({post}) => (
<div>
<footer class="page-footer font-small special-color-dark pt-4">
<div class="container">
<ul class="list-unstyled list-inline text-center">
<li class="list-inline-item">
<a class="btn-floating btn-fb mx-1" href="https://github.com/Jackbaude/tmc-wiki" target="_blank"rel="noreferrer noopener">
<FontAwesomeIcon icon={faGithub} size="2x"/>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1" href="https://discord.gg/FcTFg2E" target="_blank"rel="noreferrer noopener">
<FontAwesomeIcon icon={faDiscord} size="2x"/>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-gplus mx-1" href="https://www.youtube.com/channel/UCf9SYal_h3WSoksvxLYruuQ"target="_blank"rel="noreferrer noopener">
<FontAwesomeIcon icon={faYoutube} size="2x"/>
</a>
</li>
</ul>
</div>
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="www.technicalmc.xyz/"> technicalmc.xyz</a>
</div>
</footer>
</div>
)
Example #4
| 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 #5
| 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 #6
| Source File: nav.js From tmc-wiki with MIT License | 5 votes |
|
Nav = ({ post }) => (
<nav className="navbar navbar-expand-lg">
<a className="navbar-brand" href="/"><h5 className="brand-name display-4 animate__animated animate__flipInX"></h5></a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="/posts">Posts<span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://github.com/Jackbaude/tmc-wiki" target="_blank"rel="noreferrer noopener"><FontAwesomeIcon icon={faGithub}/> Github</a>
</li>
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div className="dropdown-menu" aria-labelledby="navbarDropdown">
<a className="dropdown-item" href="https://discord.gg/FcTFg2E" target="_blank"rel="noreferrer noopener"><FontAwesomeIcon icon={faDiscord}/> Discord</a>
<div className="dropdown-divider"></div>
<a className="dropdown-item" href="https://www.youtube.com/channel/UCf9SYal_h3WSoksvxLYruuQ"target="_blank"rel="noreferrer noopener"> <FontAwesomeIcon icon={faYoutube}/> Youtube</a>
</div>
</li>
</ul>
<StaticQuery
query={graphql`
query SearchIndexQuery {
siteSearchIndex {
index
}
}
`}
render={data => (
<Search searchIndex={data.siteSearchIndex.index}/>
)}
/>
</div>
</nav>
)
Example #7
| Source File: SocialIcons.js From bonded-stablecoin-ui with MIT License | 5 votes |
|
SocialIcons = ({size = "full", centered = false, gaLabel}) => { // type full or short
const { t } = useTranslation();
const { lang } = useSelector((state) => state.settings);
const links = [
{
name: "discord",
icon: faDiscord,
link: "https://discord.obyte.org/"
},
{
name: "telegram",
icon: faTelegram,
link: "https://t.me/obyteorg",
link_ru: "https://t.me/obyte_ru"
},
{
name: "weixin",
icon: faWeixin,
link: "https://mp.weixin.qq.com/s/JB0_MlK6w--D6pO5zPHAQQ"
},
{
name: "twitter",
icon: faTwitter,
link: "https://twitter.com/ObyteOrg"
},
{
name: "youtube",
icon: faYoutube,
link: "https://www.youtube.com/channel/UC59w9bmROOeUFakVvhMepPQ/"
},
{
name: "medium",
icon: faMediumM,
link: "https://blog.obyte.org"
},
{
name: "reddit",
icon: faRedditAlien,
link: "https://www.reddit.com/r/obyte/"
},
{
name: "bitcoin",
icon: faBitcoin,
link: "https://bitcointalk.org/index.php?topic=1608859.0"
},
{
name: "facebook",
icon: faFacebook,
link: "https://www.facebook.com/obyte.org"
}
];
const gaTracking = (name) => {
ReactGA.event({
category: "Social",
action: "Click to " + name,
label: gaLabel
})
}
return (<div style={{ textAlign: "center", fontSize: 14 }}>
{size === "full" && <div style={{ marginBottom: 10 }}><Text type="secondary">{t("footer.join_community", "Join the community, get help")}:</Text></div>}
<div style={{ display: "flex", justifyContent: centered ? "center" : "flex-start", flexWrap: "wrap", alignItems: "center", fontSize: 18 }}>
{(size === "full" ? links : links.slice(0,5)).map((social) => <a style={{ margin: "5px 10px", color: "#0037ff" }} key={"link-" + social.name} target="_blank" rel="noopener" href={(lang && social["link_" + lang]) || social.link} onClick={() => gaTracking(social.name)}><FontAwesomeIcon size="lg" icon={social.icon} /></a>)}
</div>
</div>)
}
Example #8
| Source File: tables.js From volt-react-dashboard with MIT License | 5 votes |
|
pageTraffic = [
{ id: 1, source: "Direct", sourceType: "Direct", trafficShare: 51, change: 2.45, sourceIcon: faGlobeEurope, sourceIconColor: "gray" },
{ id: 2, source: "Google Search", sourceType: "Search / Organic", trafficShare: 18, change: 17.67, sourceIcon: faGoogle, sourceIconColor: "info" },
{ id: 3, source: "youtube.com", sourceType: "Social", category: "Arts and Entertainment", rank: 2, trafficShare: 27, sourceIcon: faYoutube, sourceIconColor: "danger" },
{ id: 4, source: "yahoo.com", sourceType: "Referral", category: "News and Media", rank: 11, trafficShare: 8, change: -9.30, sourceIcon: faYahoo, sourceIconColor: "purple" },
{ id: 5, source: "twitter.com", sourceType: "Social", category: "Social Networks", rank: 4, trafficShare: 4, sourceIcon: faTwitter, sourceIconColor: "info" }
]
Example #9
| Source File: Footer.js From Oud with MIT License | 4 votes |
|
/**
* the footer function
* @function
* @returns {JSX}
*/
function Footer() {
return (
<div>
<footer className="main-footer">
<div className="footer-middle Ffooter-middle">
<div className="container">
<div className="row">
{/* Column 1 */}
<div className="col-md-3 col-sm-6">
<Link to="/welcomeUser">
<img
data-testid="logoImage"
className="img-responsive img-resp "
src={logo}
alt="Oud logo"
/>
</Link>
</div>
{/* Column 2 */}
<div className="col-md-3 col-sm-6">
<h5
data-testid="Company"
className="font-weight-bold text-uppercase mt-3 mb-4"
>
Company
</h5>
<ul className="list-unstyled ListMain hovergold ">
<li className="ListItem">
<Link data-testid="About" to="/about">
About
</Link>
</li>
<li className="ListItem">
<Link data-testid="Features" to="/features">
Features
</Link>
</li>
<li className="ListItem">
<Link data-testid="Help" to="/help">
Help
</Link>
</li>
</ul>
</div>
{/* Column 3 */}
<div className="col-md-3 col-sm-6">
<h5
data-testid="Others"
className="font-weight-bold text-uppercase mt-3 mb-4"
>
Others
</h5>
<ul className="list-unstyled ListMain hovergold">
<li className="ListItem">
<Link data-testid="Artists" to="/forartists">
For Artists
</Link>
</li>
<li className="ListItem">
<Link data-testid="contact_us" to="/contactus">
contact us
</Link>
</li>
</ul>
</div>
{/* Column 4 */}
<div className="col-md-3 col-sm-6">
<h5
data-testid="Links"
className="font-weight-bold text-uppercase mt-3 mb-4"
>
Links
</h5>
<ul className="list-unstyled ListMain hovergold">
<li className="ListItem">
<Link data-testid="WePlayer" to="/">
Web Player
</Link>
</li>
<li className="ListItem">
<Link data-testid="MobileApp" to="/android">
Free Mobile App
</Link>
</li>
</ul>
</div>
{/* Column 5 */}
<div className="col-md-3 col-sm-6 ml-auto">
<ul className="list-unstyled ListMain list-inline text-center">
<li
data-testid="faFacebook"
className="list-inline-item fa-2x "
>
<FontAwesomeIcon icon={faFacebook} />
</li>
<li
data-testid="faTwitter"
className="list-inline-item fa-2x"
>
<FontAwesomeIcon icon={faTwitter} />
</li>
<li
data-testid="faInstagram"
className="list-inline-item fa-2x"
>
<FontAwesomeIcon icon={faInstagram} />
</li>
<li
data-testid="faYoutube"
className="list-inline-item fa-2x"
>
<FontAwesomeIcon icon={faYoutube} />
</li>
</ul>
</div>
</div>
{/* Footer Bottom */}
<div className="footer-bottom Ffooter-bottom">
<p className="text-xs-center">
©{new Date().getFullYear()} Oud - All Rights Reserved
</p>
</div>
</div>
</div>
</footer>
<div></div>
</div>
);
}
Example #10
| 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 #11
| Source File: Campaign.jsx From journey.io with MIT License | 4 votes |
|
render() {
console.log('state', this.state);
const getId = url => {
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
const match = url.match(regExp);
return match && match[2].length === 11 ? match[2] : null;
};
const videoUrl = this.state.campaignLinks.video || '';
const videoId = getId(videoUrl);
const campaignDisplay =
Object.keys(this.state.campaignLinks).length > 0 ? (
<div>
<iframe
width="290"
height="200"
src={`http://www.youtube.com/embed/${videoId}`}
frameBorder="0"
/>
<br />
<br />
<div className="d-flex flex-row">
<a
className="socialMediaLink"
href={this.state.campaignLinks.spotify}
>
<FontAwesomeIcon
style={{ width: '2vw', height: '2vw' }}
icon={faSpotify}
/>
</a>
<br />
<a
className="socialMediaLink"
href={this.state.campaignLinks.instagram}
>
<FontAwesomeIcon
style={{ width: '2vw', height: '2vw' }}
icon={faInstagram}
/>
</a>
<br />
<a
className="socialMediaLink"
href={this.state.campaignLinks.facebook}
>
<FontAwesomeIcon
style={{ width: '2vw', height: '2vw' }}
icon={faFacebook}
/>
</a>
<br />
<a
className="socialMediaLink"
href={this.state.campaignLinks.soundcloud}
>
<FontAwesomeIcon
style={{ width: '2vw', height: '2vw' }}
icon={faSoundcloud}
/>
</a>
<br />
<a
className="socialMediaLink"
href={this.state.campaignLinks.twitter}
>
<FontAwesomeIcon
style={{ width: '2vw', height: '2vw' }}
icon={faTwitter}
/>
</a>
<br />
<a
className="socialMediaLink"
href={this.state.campaignLinks.youtube}
>
<FontAwesomeIcon
style={{ width: '2vw', height: '2vw' }}
icon={faYoutube}
/>
</a>
<br />
<br />
</div>
{this.state.campaignLinks.bio}
<br />
<br />
</div>
) : (
<div></div>
);
return (
<div className="d-flex mx-auto">
<Card
style={{ width: '60em' }}
className="mx-auto justify-content-center shadow p-3 mb-5 bg-white rounded row justify-content-center align-self-center"
>
<Card.Title>
<h2>
Let {this.props.artistName} know that you want to see them in your
city!
</h2>
</Card.Title>
<br />
<div className="row">
<div className="col-8">
<Map campaignId={this.props.campaignId} />
</div>
<div className="col-4">
{campaignDisplay}
<LocationSearchInput
handleChange={this.handleChange}
handleSelect={this.handleSelect}
submitInterest={this.submitInterest}
address={this.state.address}
/>
</div>
</div>
</Card>
</div>
);
}
