@fortawesome/free-brands-svg-icons#faMedium JavaScript Examples

The following examples show how to use @fortawesome/free-brands-svg-icons#faMedium. 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: index.js    From Webiu with MIT License 6 votes vote down vote up 
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 #2
Source File: index.js    From gatsby-blog-mdx with MIT License 5 votes vote down vote up 
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 #3
Source File: UserLinks.js    From paigeniedringhaus.com with MIT License 5 votes vote down vote up 
UserLinks = (props) => {
  const { config } = props;

  const getLinkIcons = (icon) => {
    switch (icon) {
      case 'faGithub':
        return <FontAwesomeIcon icon={faGithub} />;
      case 'faTwitter':
        return <FontAwesomeIcon icon={faTwitter} />;
      case 'faEnvelope':
        return <FontAwesomeIcon icon={faEnvelope} />;
      case 'faMedium':
        return <FontAwesomeIcon icon={faMedium} />;
      case 'faDev':
        return <FontAwesomeIcon icon={faDev} />;
    }
  };

  const getLinkElements = () => {
    const { userLinks } = config;
    return userLinks.map((link) => (
      <a
        href={link.url}
        target="_blank"
        rel="noopener noreferrer"
        key={link.label}
      >
        {getLinkIcons(link.iconClassName)}
        <div className="user-link-text">{link.label}</div>
      </a>
    ));
  };

  const { userLinks, siteRss } = config;
  if (!userLinks) {
    return null;
  }
  return (
    <div className="user-links">
      {getLinkElements()}
      <a href={siteRss} target="_blank" rel="noopener noreferrer">
        <FontAwesomeIcon icon={faRssSquare} />
        <div>RSS</div>
      </a>
    </div>
  );
}