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.
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;
}