react-icons/fa#FaInfoCircle JavaScript Examples

The following examples show how to use react-icons/fa#FaInfoCircle. 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: Toolbar.js    From dm2 with Apache License 2.0 5 votes vote down vote up 
Toolbar = observer(({ view, history, lsf, isLabelStream, hasInstruction }) => {
  const annotation = lsf?.annotationStore?.selected;

  const task = view.dataStore.selected;

  const { viewingAllAnnotations, viewingAllPredictions } =
    lsf?.annotationStore ?? {};

  const viewAll = viewingAllAnnotations || viewingAllPredictions;

  return lsf?.noTask === false && task ? (
    <Block name="label-toolbar" mod={{ labelStream: isLabelStream }}>
      <Elem name="task">
        <Space size="large">
          <div style={{ display: "flex", alignItems: "center" }}>
            <History history={history}>
              <div style={{ margin: history ? "0 10px" : 0 }}>
                Task #{task.id}
              </div>
            </History>
          </div>

          {!viewAll && <LSFOperations history={annotation?.history} />}
        </Space>
      </Elem>

      {!!lsf && !!annotation && annotation.type === "annotation" && (
        <Elem name="actions">
          {!viewAll && (
            <SubmissionButtons
              lsf={lsf}
              annotation={annotation}
              isLabelStream={isLabelStream}
              disabled={lsf.isLoading}
            />
          )}

          <Elem name="tools">
            <Space>
              {hasInstruction && (
                <Tooltip title="Labeling Instructions">
                  <Button
                    look={lsf.showingDescription ? "primary" : "dashed"}
                    icon={<Icon icon={FaInfoCircle} />}
                    onClick={() => lsf.toggleDescription()}
                  />
                </Tooltip>
              )}

              <Tooltip title="Settings">
                <Button
                  look="dashed"
                  icon={<Icon icon={FaCog} />}
                  onClick={() => lsf.toggleSettings()}
                />
              </Tooltip>
            </Space>
          </Elem>
        </Elem>
      )}
    </Block>
  ) : null;
})
Example #2
Source File: NavBar.js    From CS-Hut with MIT License 5 votes vote down vote up 
function NavBar() {
  const [NavBar, setNavBar] = useState(false);

  const ChangeBackground = () => {
    if (window.scrollY > 220) {
      setNavBar(true);
    } else {
      setNavBar(false);
    }
  };

  window.addEventListener("scroll", ChangeBackground);
  return (
    <IconContext.Provider
      value={{ color: "white", size: "2rem", padding: "20px" }}
    >
      <div>
        <Navbar
          fixed="top"
          expand="lg"
          variant="dark"
          className={NavBar ? "navBar active" : "navBar"}
        >
          <Navbar.Brand href="/">
            <img src={NavLogo} alt="" className="nav-img" />
            CS Hut
          </Navbar.Brand>
          <Navbar.Toggle
            aria-controls="basic-navbar-nav"
            className="custom-toggler"
          />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
              <FaHome />
              <Nav.Link href="/">Home</Nav.Link>
              <div className="borderbottom"></div>
              <MdComputer />
              <Nav.Link href="/Tags">Resources</Nav.Link>
              <div className="borderbottom"></div>
              <FaInfoCircle />
              <Nav.Link>
                <HashLink className="hash-link" to="/#ab">
                  About
                </HashLink>
              </Nav.Link>
              <div className="borderbottom"></div>
              <MdContactMail />
              <Nav.Link href="/contactus">Contact</Nav.Link>
              <div className="borderbottom"></div>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    </IconContext.Provider>
  );
}
Example #3
Source File: Footer.js    From covid19 with MIT License 5 votes vote down vote up 
render() {
        const { lang, fullMap, fullPlot, fullTree } = this.props
        if (fullMap || fullPlot || fullTree) return <div />

        return (
            <Fragment>
                <div className="footer">
                    <span>
                        <a href="https://yliu.io">Steven Liu</a> 2020
                    </span>
                    <FaInfoCircle
                        data-tip={!(isMobile || isIPad13) ? i18n.ABOUT[lang] : null}
                        size={18}
                        onClick={() => this.setState({ modal: true })}
                    />
                    <FaGithub
                        data-tip={!(isMobile || isIPad13) ? i18n.SOURCE_CODE[lang] : null}
                        size={18}
                        onClick={() => window.open('https://github.com/stevenliuyi/covid19')}
                    />
                </div>
                <Modal isOpen={this.state.modal} centered={true} toggle={this.toggle}>
                    <ModalHeader toggle={this.toggle}>{i18n.ABOUT[lang]}</ModalHeader>
                    <ModalBody className="footer-about">
                        <div dangerouslySetInnerHTML={{ __html: i18n.ABOUT_TEXT[lang] }} />
                        <a
                            className="bmc-button"
                            target="_blank"
                            href="https://www.buymeacoffee.com/stevenliuyi"
                            rel="noopener noreferrer"
                        >
                            <img
                                src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg"
                                alt="Buy me a coffee"
                            />
                            <span style={{ marginLeft: 15, fontSize: 19 }}>Buy me a coffee</span>
                        </a>
                    </ModalBody>
                </Modal>
            </Fragment>
        )
    }