react-icons/fa#FaPhone JavaScript Examples

The following examples show how to use react-icons/fa#FaPhone. 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: ProfileCard.js    From ReactJS-Projects with MIT License 6 votes vote down vote up 
ProfileCard = ({ details }) => {
    return (
        <Card>
            <CardBody className='text-center'>
                <img alt="profile_pic" height="150" width="150" className="rounded-circle img-thumbnail border-danger" src={details.picture?.large} />
                <CardTitle className='text-primary'>
                    <h1>
                        <span>{details.name?.title}. {details.name?.first} {details.name?.last}</span>
                    </h1>
                </CardTitle>
                <CardText className='m-3'>
                    <span><FaMapMarkedAlt />  {details.location?.city}</span>
                </CardText>
                <CardText className='m-3'>
                    <span><FaPhone />  {details.phone}</span>
                </CardText>
                <CardText className='m-3'>
                    <span><FaEnvelope />  {details.email}</span>
                </CardText>
            </CardBody>
        </Card>
    )
}
Example #2
Source File: ViewContact.js    From ReactJS-Projects with MIT License 5 votes vote down vote up 
ViewContact = () => {
  const { state } = useContext(ContactContext);
  const { contact } = state;

  return (
    <Container>
      <Row className="mt-5 mb-5">
        <Col md="5" className="offset-md-3">
          <Card className="pt-3 pb-5">
            <CardBody className="text-center ">
              <img
                height="150"
                width="150"
                className="cardImg profile border-danger"
                src={contact?.picture}
              />
              <CardTitle className="text-primary mt-3">
                <h1>{contact?.name}</h1>
              </CardTitle>
              <CardSubtitle>
                <h3>
                  <FaPhone className="mr-2" />
                  {contact?.phoneNumber}
                </h3>
              </CardSubtitle>
              <a
                className="btn btn-primary btn-block"
                target="_blank"
                href={`mailto:{contact?.email}`}
              >
                <FaEnvelope className="icon mr-2" />
                {contact?.email}
              </a>

              <a
                className="btn btn-primary btn-block"
                target="_blank"
                href={`https://maps.google.com/?=${contact?.address}`}
              >
                <FaMapMarkerAlt className="icon mr-2" />
                {contact?.address}
              </a>
            </CardBody>
          </Card>
        </Col>
      </Row>
    </Container>
  );
}
Example #3
Source File: Video.js    From talk4free with MIT License 5 votes vote down vote up 
render() {
    return (
      <React.Fragment>
        <ConnectionStatus connected={this.state.connected} />
        <OTSession
          ref={this.state.otSession}
          apiKey={this.props.apiKey}
          sessionId={this.props.sessionId}
          token={this.props.token}
          eventHandlers={this.sessionEvents}
          onError={this.onError}
          style={{ diplay: "flex", flexDirection: "column" }}
        >
          {this.state.error ? <div id="error">{this.state.error}</div> : null}
          <div className="publisher">
            <Publisher
              error={this.state.error}
              audio={this.state.audio}
              video={this.state.video}
              videoSource={this.state.videoSource}
              email={this.props.email}
              username={
                this.props.username ? this.props.username : this.props.username2
              }
              img={this.props.img}
            />
            <OTStreams style={{ display: "flex" }}>
              <OTSubscriber
                properties={{
                  // name: this.props.username2,
                  style: {
                    audioLevelDisplayMode: "on",
                    buttonDisplayMode: "off",
                    nameDisplayMode: "on",
                    backgroundImageURI: this.props.imgUrl
                  },
                  inserMode: "after"
                }}
              />
            </OTStreams>
          </div>
        </OTSession>
        {/* Take out the buttons so they will be only for one component */}
        <div className="controls">
          <CheckBox label="Screen" onChange={this.changeVideoSource} />
          <CheckBox
            label="Audio"
            initialChecked={this.state.audio}
            onChange={this.setAudio}
          />
          <CheckBox
            label="Video"
            initialChecked={this.state.video}
            onChange={this.setVideo}
          />
          <Button onClick={this.props.onHangUp}>
            <FaPhone />
          </Button>
        </div>
      </React.Fragment>
    );
  }