I was creating a footer for a website. There I added some icons with fontawesome and use anchor tags with them. Now because of the style of anchor tag from a react bootstrap scss file my icons are getting blue and I can't change them. What can I do?

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {fab, faYoutube, faFacebook, faGithub} from "@fortawesome/free-brands-svg-icons";
import React from 'react';
import { library } from '@fortawesome/fontawesome-svg-core';

library.add(fab, faYoutube, faFacebook, faGithub);

const Footer = () => {
    const today = new Date();
    const year = today.getFullYear();
    return (
        <footer className='text-center mt-auto bg-danger text-white fst-italic d-lg-flex justify-content-between'>
            <h3 className='p-3'>Copyright &copy; {year} by Fruit Jet</h3>
            <div className='fs-2 text-white d-inline-flex'>
                <div className='p-3'>
                    <a href="https://www.facebook.com/groups/288111895977592" target="_blank" rel="noopener noreferrer">
                        <FontAwesomeIcon icon={['fab', 'fa-facebook']} />
                    </a>
                </div>
                <div className='p-3'>
                    <a href="https://www.youtube.com/c/ProgrammingHero" target="_blank" rel="noopener noreferrer">
                        <FontAwesomeIcon icon={['fab', 'fa-youtube']} />
                    </a>
                </div>
                <div className='p-3'>
                    <a href="https://github.com/ProgrammingHero1" target="_blank" rel="noopener noreferrer">
                        <FontAwesomeIcon icon={['fab', 'fa-github']} />
                    </a>
                </div>
            </div>
        </footer>
    );
};

export default Footer;

This picture tells that a file from react bootstrap is generating this blue color

CodePudding user response：

You have many options:

• Use style attribute - style={{ color: "white" }}
• Use className attribute. Here you can just directly use a bootstrap class or create your own className="text-white"
• Create a css or scss and target links directly or via class: a svg { color: white; }
• You can also override bootstrap defaults, so ALL your links are white.

It really depends on what you try to achieve. Generally you can just override bootstrap styles with tool of your choice. If it doesn't work, add "!important".

Please look into following code sandbox: https://codesandbox.io/s/eloquent-haze-764x9l

CodePudding user response：

To customize bootstrap I create a file index.scss in the App root, and import it in inindex.js or index.tsx ( if you use Typescript ) which is the root of my App. On top of index.scss I import the bootstrap .scss files:

@import "../node_modules/bootstrap/scss/bootstrap";

Then below you can style what you want and it will override the bootstrap style.