How to change 'react-ionicons' color on hover effect with React

user_13895645 0
Viewed 332

I have a component with a list of icons using react-ionicons like so:

export default function SocialIconsViewer() {

    return ( 
        <ul className="socials">
            <li><a href="www.twitter.com"><LogoTwitter/></a>
            </li>
            <li><a href="www.twitter.com"><LogoFacebook
                    title={'Facebook'}
                    /></a>
            </li><li><a href="www.twitter.com"><LogoInstagram 
                    title={'Instagram'}
                    /></a>
            </li><li><a href="www.twitter.com"><LogoYoutube 
                    title={'Youtube'}
                    /></a>
            </li><li><a href="www.twitter.com"><Mail 
                    title={'E-mail'}
                    /></a>
            </li>
        </ul>
    );
}

I am trying to create a hover effect over these icons in the css file that imported here:

.socials {
  position: absolute;
  right: 100px;
  bottom: 30px;
  z-index: 4;
  display: flex;
  flex-direction: column;
}
.socials li {
  list-style: none;
}
.socials li a {
  text-decoration: none;
  color: var(--black);
  font-size: 1.75em;
  transition: 300ms;
}
.socials li a:hover {
  color: crimson;
}

However, this doesn't seem to work and I am having a hard time finding information to work with react-ionicons.

react-typescript ionicons reactjs css html
1 Answers

There are no imports in your component code.

import {
  LogoTwitter,
  LogoFacebook,
  LogoInstagram,
  LogoYoutube,
  Mail,
} from "react-ionicons";

This is a very strange situation, because hover with background-color works fine with your Code but color hover doesn't! ?? Maybe it's the package's fault, I don't know for sure.

I spent a lot of time on it.... and found an alternative approach. I hope you will like it.

You could use react-icons you need to properly install them and import them.

npm install react-icons --save

Example

import { FaBeer } from 'react-icons/fa';

export default function Question() {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

Your component after the changes

import { FaFacebook, FaTwitter, FaYoutube, FaInstagram } from "react-icons/fa";

export default function SocialIconsViewer() {
  return (
    <ul className="socials">
      <li>
        <a href="https:://facebook.com" target="_blank" rel="noreferrer">
          <FaFacebook />
        </a>
      </li>
      <li>
        <a href="https://instagram.com" target="_blank" rel="noreferrer">
          <FaInstagram />
        </a>
      </li>
      <li>
        <a href="https://twitter.com" target="_blank" rel="noreferrer">
          <FaTwitter />
        </a>
      </li>
      <li>
        <a href="https://youtube.com" target="_blank" rel="noreferrer">
          <FaYoutube />
        </a>
      </li>
    </ul>
  );
}

Your Css styles works properly (hover effect) if we use global.css file.

.socials {
  position: absolute;
  right: 100px;
  bottom: 30px;
  z-index: 4;
  display: flex;
  flex-direction: column;
}
.socials li {
  list-style: none;
}
.socials li a {
  text-decoration: none;
  color: var(--black);
  font-size: 1.75em;
  transition: 300ms;
}
.socials li a:hover {
  color: crimson;
}
user_137059790
Related