loop-44/components/socialicons.js

import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faFacebook,
  faInstagram,
  faLinkedin,
} from "@fortawesome/free-brands-svg-icons";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons";

const SocialIcons = () => (
  <Container className="text-center">
    <Row>
      <Col xs={12} md={12} lg={12} className="text-center">
        <Row
          className="justify-content-center"
          style={{backgroundColor: "black", padding: "20px", color: "white" }}
        >
          <Col xs={4} md={4} lg={4} className="text-center">
            <a href="https://www.facebook.com/loop44.it/">
              <FontAwesomeIcon
                icon={faFacebook}
                size="0.5x"
                style={{ color: "white" }}
              />
            </a>
          </Col>
          <Col xs={4} md={4} lg={4} className="text-center">
            <a href="https://www.instagram.com/loop44.it">
              <FontAwesomeIcon
                icon={faInstagram}
                size="1x"
                style={{ color: "white" }}
              />
            </a>
          </Col>
          <Col xs={4} md={4} lg={4} className="text-center">
            <a href="mailto:info@loop44.it">
              <FontAwesomeIcon
                icon={faEnvelope}
                size="1x"
                style={{ color: "white" }}
              />
            </a>
          </Col>
        </Row>
      </Col>
    </Row>
  </Container>
);

export default SocialIcons;