Search code examples
javascripthtmlreactjsreact-bootstrapbootstrap-5

How do I make a Bootstrap Icon appear?

I am new to Bootstrap and I'm building a login screen for an app. I want to use the the MDBIcons for google, twitter and facebook. I followed the documentaion here https://mdbootstrap.com/docs/b5/react/components/buttons/

However, when I view my webpage I can't see the icons. I only a small button in the color of the brand. My code for the google icon button looks like this

import "./App.css";
import React from "react";
import {  MDBIcon,  MDBBtn } from 'mdb-react-ui-kit';
 
const SignIn = () => {
  return (
    <>

      <MDBBtn
              className="m-1"
              style={{ backgroundColor: "#dd4b39" }}
              href="#"
            >
              <MDBIcon fab icon="google" />
            </MDBBtn>
    </>
  );
};

photo of button

The picture above is what I see, there is no Google logo in the button. I am using React and running 'npm start' to view my webpage on chrome.

Any help would be appreciated.

Solution

  • Did you add style in the public/index.html file? Info about it is here. React MDB Installation Guide.

    I mean this:

    link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet"/>

    If not, try adding this into your index.html file's "head" section.