@fortawesome/free-solid-svg-icons#faEnvelope JavaScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#faEnvelope. 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: TitleBar.js    From aava.sh with MIT License 6 votes vote down vote up
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 #2
Source File: TopBanner.js    From clayma-store with MIT License 6 votes vote down vote up
export default function TopBanner() {
  return (
    <div className="top-banner-container">
      <div className="row">
        <div className="col-lg-3">
          <FontAwesomeIcon icon={faPhone} className="top-banner-icon" />
          +0199999999
        </div>
        <div className="col-lg-3">
          <FontAwesomeIcon icon={faEnvelope} className="top-banner-icon" />
          [email protected]
        </div>
        <div className="col-lg-6">
          On sale now up to 50% off!
          <Link to="/shop" className="shop_now_link_top_banner">
            Shop now
          </Link>
        </div>
      </div>
    </div>
  );
}
Example #3
Source File: index.js    From Webiu with MIT License 6 votes vote down vote up
GithubCard = ({ name, username, description, twitter, email, image, url, blog, location, from, repo }) => {
  return (
    <div>
      <div className="card">
        {image ? <div className="card-img-div">
          <img src={image} alt="Profile-img" className="card-img" />
        </div> : null}
        {name ? <h4 className="card-title">
          {name}
        </h4> : null}
        {username ? <p className="card-para">
          {'@' + username}
        </p> : null}
        {description ? <p className="card-para">
          {description}
        </p> : null}
        {location ? <p className="card-para">
          <FontAwesomeIcon icon={faMapMarkerAlt} style={{color:'#51ad28'}} /> {location}
        </p> : null}
        <p className="card-para">
          {url ? <Link to={url} className="btn">GitHub</Link> : null}
          {blog ? <Link to={blog} className="btn">Blog</Link> : null}
        </p>
        {repo ? <p className="card-para">
          {repo} Repositories
        </p> : null}
        {from ? <p className="card-para">
          Active since <span className="active-since">{moment(from).format("MMMM Do YYYY")}</span>
        </p> : null}
        {twitter ? <div style={{ margin: "5px 0 0 10px" }}>
            <a className="anchor" href={`https://twitter.com/${twitter}`}><FontAwesomeIcon icon={faTwitter} style={{color:'#377293'}} /></a>
        </div> : null}
        {email ? <div style={{ margin: "5px 0 0 15px" }}>
            <a className="anchor" href={`mailto:${email}`}><FontAwesomeIcon icon={faEnvelope} style={{color:'#377293'}} /></a>
        </div> : null}
      </div>
    </div>
    )
}
Example #4
Source File: Footer.jsx    From signdocs with MIT License 6 votes vote down vote up
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 #5
Source File: LteNotificationNavItem.test.jsx    From react-lte with MIT License 6 votes vote down vote up
test('Should render component without crash', () => {
  const dom = <LteNotificationNavItem icon={faEnvelope} message={message} date={date} href={href} />;
  const { container } = render(dom, { wrapper: MemoryRouter });

  expect(container.querySelector('a').getAttribute('href')).toEqual('/default');
  expect(container.querySelector('svg').getAttribute('class')).toContain('fa-envelope');
  expect(container.querySelector('span').innerHTML).toEqual(message);
  expect(container.querySelector('p').innerHTML).toEqual(date);
});
Example #6
Source File: NotificationMenu.jsx    From react-lte with MIT License 6 votes vote down vote up
demoData = [
  {
    id: 1,
    icon: faEnvelope,
    message: '4 new messages',
    date: '3 mins',
    href: '/notification/1',
  },
  {
    id: 2,
    icon: faUsers,
    message: '8 friend requests',
    date: '12 hours',
    href: '/notification/2',
  },
  {
    id: 3,
    icon: faFile,
    message: '3 new reports',
    date: '2 days',
    href: '/notification/3',
  },
]
Example #7
Source File: links.js    From yezz.me with MIT License 5 votes vote down vote up
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 #8
Source File: SystemIcons.jsx    From gatsby-startbootstrap-agency with MIT License 5 votes vote down vote up
EnvelopIcon = makeFAIcon(faEnvelope)
Example #9
Source File: globalStyle.js    From personal-site with MIT License 5 votes vote down vote up
library.add(fab, faEnvelope, faPaperclip, faExternalLinkAlt, faFire, faCross)
Example #10
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>
  );
}
Example #11
Source File: footer.js    From nashvillefccwebsite with MIT License 5 votes vote down vote up
function footer() {
  return (
    <footer>
      <nav className={componentStyles.footerNav}>
        <Connect className={componentStyles.connectLogo} alt={`Connect Logo`} />
        <div className={componentStyles.socials}>
          <a
            href="https://www.meetup.com/freeCodeCamp-Nashville/"
            aria-label="Meetup"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faMeetup} size="1x" color="#444444" />
          </a>
          <a
            href="https://discord.gg/cX9BkKrAPV"
            aria-label="Discord"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faDiscord} size="1x" color="#444444" />
          </a>
          <a
            href="https://nashdev.com/"
            aria-label="Slack"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faSlack} size="1x" color="#444444" />
          </a>
          <a
            href="https://github.com/nashvillefcc/"
            aria-label="GitHub"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faGithub} size="1x" color="#444444" />
          </a>
          <a
            href="https://twitter.com/nashvillefcc/"
            aria-label="Twitter"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faTwitter} size="1x" color="#444444" />
          </a>
          <a
            href="https://www.facebook.com/groups/free.code.camp.nashville/permalink/1479740658703738/"
            aria-label="Facebook"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faFacebook} size="1x" color="#444444" />
          </a>
        </div>
        <div className={componentStyles.emailAndCopyright}>
          <div>
            <a
              href="mailto:[email protected]"
              className={componentStyles.emailLink}
            >
              <FontAwesomeIcon icon={faEnvelope} size="2x" color="white" />
              <p className={componentStyles.emailName}>[email protected]</p>{' '}
              {/* This will change to something else once we setup a domain */}
            </a>
            <p>© 2021 FreeCodeCamp Nashville</p>
          </div>

          <a href="https://www.netlify.com">
            <img
              src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg"
              alt="Deploys by Netlify"
            />
          </a>
        </div>
      </nav>
    </footer>
  );
}
Example #12
Source File: card-item.jsx    From Pandemic-Produce-Delivery-Project with MIT License 5 votes vote down vote up
envelope = <FontAwesomeIcon icon={faEnvelope} size='2x' color='white' />
Example #13
Source File: globalStyle.js    From bartzalewski.com-v2 with MIT License 5 votes vote down vote up
library.add(fab, faEnvelope, faPaperclip, faExternalLinkAlt, faFire, faCross)
Example #14
Source File: contact.js    From paigeniedringhaus.com with MIT License 4 votes vote down vote up
ContactPage = () => {
  return (
    <Layout>
      <div className="contact-container page-body">
        <Helmet title={`Contact | ${config.siteTitle}`} />
        <h1>Contact</h1>
        <section>
          <h2 className="constact-no-underline">
            Thanks again for visiting my site, I hope you like it.
            <br />
            If you'd like to get in touch...
          </h2>
        </section>
        <section>
          <h2>
            Send me an email&nbsp;
            <FontAwesomeIcon icon={faEnvelope} />
          </h2>
          <p>
            If you'd like to say "hi" or want to talk, feel free to reach me at
            &nbsp;
            <a
              href="#mailgo"
              data-address="hellopaigen"
              data-domain="gmail.com"
            >
              hellopaigen&nbsp;@&nbsp;gmail.com
            </a>
            .
          </p>
        </section>
        <section>
          <h2>
            Follow me & chat on social media&nbsp;
            <FontAwesomeIcon icon={faTwitter} />
          </h2>
          <ul>
            <li>
              I'm on Twitter at&nbsp;
              <a
                href="https://twitter.com/pniedri"
                target="_blank"
                rel="noopener noreferrer"
              >
                @pniedri
              </a>
            </li>
            <li>
              I publish on&nbsp;
              <a
                href="https://paigen11.medium.com"
                target="_blank"
                rel="noopener noreferrer"
              >
                Medium
              </a>
              &nbsp;and&nbsp;
              <a
                href="https://dev.to/paigen11"
                target="_blank"
                rel="noopener noreferrer"
              >
                DEV
              </a>
              &nbsp;under @paigen11.
            </li>
            <li>
              And I've started sharing my IoT projects on&nbsp;
              <a
                href="https://www.hackster.io/paige-niedringhaus"
                target="_blank"
                rel="noopener noreferrer"
              >
                Hackster.io
              </a>
              &nbsp;too.
            </li>
          </ul>
        </section>
        <section>
          <h2>
            Check out my Github profile&nbsp;
            <FontAwesomeIcon icon={faGithub} />
          </h2>
          <p>
            All of the&nbsp;
            <a
              href="https://github.com/paigen11"
              target="_blank"
              rel="noopener noreferrer"
            >
              projects
            </a>
            &nbsp; I build for myself (mostly to learn new stuff) are open
            source, and I'm happy for people to fork them and put them to use.
          </p>
        </section>
        <section>
          <h2>
            Or subscribe to my Substack newsletter&nbsp;
            <FontAwesomeIcon icon={faRssSquare} />
          </h2>
          <p>
            I promise to never send spam, only useful emails about new articles
            I've written or links to talks I've given.
          </p>
          <br />
          <Subscribe />
          <br />
          <br />
          <p>Thanks and have a great day!</p>
        </section>
      </div>
    </Layout>
  );
}
Example #15
Source File: Navigation.jsx    From jitsi-party with MIT License 4 votes vote down vote up
render() {
    const onClick = this.props.onClick;
    const { north, south, east, west } = this.props.directions || {};

    const mapButtonClass = this.props.showMapTooltip
      ? "map-button animated"
      : "map-button";
    const pokeButtonClass = this.state.showPokeOptions
      ? "poke-button focused"
      : "poke-button";

    const room = this.props.currentRoom.room;
    const audio = this.props.rooms[room].audio;
    const roomType = this.props.rooms[room].type;
    const events = this.props.events;
    const users = _.flatten(Object.values(this.props.users));

    const handleClickMap = () => this.props.handleOpenModal("map");
    const handleClickEvents = () => this.props.handleOpenModal("events");
    const handleClickEmail = () => this.props.handleOpenModal("email");

    return (
      <div className="navigation-container">
        <div className="column settings-container">
          <div className="map-button-container">
            {this.props.showMapButton && !this.props.hideSettings && (
              <button
                className={mapButtonClass}
                title={Config.tooltips.map}
                disabled={false}
                onClick={handleClickMap}
              >
                <FontAwesomeIcon icon={faMap} />
              </button>
            )}
            {/* {this.props.showMapTooltip &&
                            <div className="map-tooltip">you have unlocked the party map!</div>
                        } */}
          </div>
          <div className="events-button-container">
            {events && events.length > 0 && !this.props.hideSettings && (
              <button
                className="events-button"
                title={Config.tooltips.events}
                onClick={handleClickEvents}
              >
                <FontAwesomeIcon icon={faCalendar} />
              </button>
            )}
          </div>
          <div className="email-button-container">
            {Config.moderation &&
              !_.isEmpty(Config.moderation.moderatorEmails) && (
                <button
                  className="email-button"
                  title={Config.tooltips.moderator}
                  onClick={handleClickEmail}
                >
                  <FontAwesomeIcon icon={faEnvelope} />
                </button>
              )}
          </div>
          {roomType.toUpperCase() === "CHATSTREAM" &&
          this.props.currentRoom.entered &&
          !this.props.hideSettings ? (
            <div className="chat-button-container">
              <button
                className={mapButtonClass}
                title={Config.tooltips.chat}
                disabled={false}
                onClick={() =>
                  this.setState({ hideChat: !this.state.hideChat })
                }
              >
                <FontAwesomeIcon icon={faCommentAlt} />
              </button>
            </div>
          ) : null}
          <div className="poke-button-container">
            {Config.poke &&
              this.props.isPokingUnlocked &&
              !this.props.hideSettings && (
                <button
                  className={pokeButtonClass}
                  title={Config.tooltips.poke}
                  onClick={this.handleClickPokeButton.bind(this)}
                >
                  <FontAwesomeIcon icon={Config.poke.fontAwesomeIcon} />
                </button>
              )}
            {this.state.showPokeOptions && (
              <PokeOptions
                users={users}
                handlePoke={this.handlePoke.bind(this)}
              />
            )}
          </div>
          <div className="audio-button-container">
            {audio && (
              <AudioPlayer
                src={audio.path}
                autoPlay={audio.autoPlay}
                hide={audio.hideControls}
                onChange={this.handleAudioChanged.bind(this)}
              ></AudioPlayer>
            )}
          </div>
        </div>
        <div className="column">
          <button
            className="west"
            disabled={!west}
            onClick={() => onClick(west)}
          >
            <FontAwesomeIcon icon={faArrowLeft} />
            <span className="navigation-room-name">
              {_.get(this.props.rooms[west], "name")}
            </span>
          </button>
        </div>
        <div className="column">
          <button
            className="north"
            disabled={!north}
            onClick={() => onClick(north)}
          >
            <FontAwesomeIcon icon={faArrowUp} />
            <span className="navigation-room-name">
              {_.get(this.props.rooms[north], "name")}
            </span>
          </button>
          <button
            className="south"
            disabled={!south}
            onClick={() => onClick(south)}
          >
            <FontAwesomeIcon icon={faArrowDown} />
            <span className="navigation-room-name">
              {_.get(this.props.rooms[south], "name")}
            </span>
          </button>
        </div>
        <div className="column">
          <button
            className="east"
            disabled={!east}
            onClick={() => onClick(east)}
          >
            <FontAwesomeIcon icon={faArrowRight} />
            <span className="navigation-room-name">
              {_.get(this.props.rooms[east], "name")}
            </span>
          </button>
        </div>
        <div className="column column-avatar">
          <div className="puck-wrapper">
            <img
              src={
                Config.avatars[this.props.user.avatar.type].images[
                  this.props.user.avatar.color
                ]
              }
            />
          </div>
        </div>
      </div>
    );
  }
Example #16
Source File: footer.js    From Girscript-Community-Website with MIT License 4 votes vote down vote up
Footer = () => {
  return (
    <React.Fragment>
      <footer className={style["footer"]}>
        <div className={style["footer-addr"]}>
        <img src={images} alt="img" height="60px" width="260px" />
          <address>
            <div style={{color:"#da6d28"}}><b>MAILING ADDRESS </b></div>
            <i className="fas fa-map-marker-alt"></i> 123 Anywhere St., Any City, State, Country 12345
            <br />
          </address>
          <div style={{color:"#da6d28"}}><b>EMAIL ADDRESS </b></div>
            [email protected]
            
        </div>
        <ul className={style["footer-nav"]}>
          <li className={style["nav-item"]}>
            <h2 className={style["nav-title"]}>NAVIGATION</h2>

            <ul className={style["nav-ul"]}>
              <li>
                <Link to="/">About Us</Link>
              </li>

              <li>
                <Link to="/">Contact</Link>
              </li>

              <li>
                <Link to="/">Event</Link>
              </li>

              <li>
                <Link to="/faqs">FAQs</Link>
              </li>
            </ul>
          </li>

          <li className={style["nav-item"]}>
            <h2 className={style["nav-title"]}>OTHER</h2>

            <ul className={style["nav-ul"]}>
              <li>
                <Link to="/">Privacy Policy</Link>
              </li>

              <li>
                <Link to="/">Terms of Use</Link>
              </li>

              <li>
                <Link to="/">Code of Conduct</Link>
              </li>
            </ul>
          </li>
          <li className={style["nav-item"]}>
            <h2 className={style["nav-title"]}>SOCIAL</h2>
            <ul className={style["nav-ul"]}>
              <li>Be sure to give us a follow on the below social links</li>
            </ul>
            <div className={`col ${style["col"]}`}>
              <ul className={style["social"]}>
                <li>
                  <a
                    href="https://www.facebook.com/Girlscript"
                    target="_blank"
                    rel="noopener noreferrer"
                  ><FontAwesomeIcon icon={faFacebook} size="lg" style={{ color: "#fff" }}/>
                  </a>
                </li>
                <li>
                  <a
                    href="https://twitter.com/girlscript1"
                    target="_blank"
                    rel="noopener noreferrer"
                  ><FontAwesomeIcon icon={faTwitter} size="lg" style={{ color: "#fff" }}/>
                  </a>
                </li>
                <li>
                  <a
                    href="mailto:[email protected]"
                    target="_blank"
                    rel="noopener noreferrer"
                  ><FontAwesomeIcon icon={faEnvelope} size="lg" style={{ color: "#fff" }}/>
                  </a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
        <div className={style["footer-dash"]}>
          <div className={style["footer-text"]}> 
            <p>
              <b>Made with <FontAwesomeIcon icon={faHeart} style={{ color: "#DB3328" }}/> by
              GirlScript Community</b>
            </p>
          </div>
        </div>
      </footer>
    </React.Fragment>
  );
}
Example #17
Source File: Footer.js    From clayma-store with MIT License 4 votes vote down vote up
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 &copy; {dateyear}. All Right reserved.</p>
            <hr />
          </div>
        </div>
      </div>
    </div>
  );
}
Example #18
Source File: footer.js    From yezz.me with MIT License 4 votes vote down vote up
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">
                      &copy; {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>
    )
  }
Example #19
Source File: footer.js    From Frontend with Apache License 2.0 4 votes vote down vote up
//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>
  )
}