Hello,
I managed to pick a specific icon to add onto my header navigation link, but the icon doesn't seem to be colored like the others. Is there something wrong with the code?
Thanks
<a href="http://vortex-gaming.org/portal.php" > <i class="fa fa-home"></i> Home</a>
No, is as expected. You're adding fontawesome (CSS), the others are images.
If you can find a suitable image you can try it like this:
<a href="http://vortex-gaming.org/portal.php" > <img src="images/icons/home.png" alt="home icon"> Home</a>
Add the image to your images/icons/ directory
Hi,
and if you want to use only a Fontawesome icon, you could change the color of the icon:
Option A:
In the global.css of your theme add:
.fa-home {
color: white;
}
Replace with the color you want.
Option B:
Edit the header template of your theme, and add the "style" part:
<i class="fa fa-home" style="color: white;"></i>
Replace with the color you want.
I'm actually confused because even though it's from another website, the forums seems to understand that image. The image does come out perfectly, but the icon gets tinted the same as the text color. When I say colored I mean it's default color, the members list has two little people as it's icon that are colored one blue and the other green.
I'm lost....
Do you mean an image file or Fontawesome icon?
I'm really really lost....
(2018-09-14, 03:39 PM)Darkblizzard Wrote: [ -> ]I'm actually confused because even though it's from another website, the forums seems to understand that image. The image does come out perfectly, but the icon gets tinted the same as the text color. When I say colored I mean it's default color, the members list has two little people as it's icon that are colored one blue and the other green.
The two little people are/is an image, they will always be that color. It is actually one image part of a sprite.
The 2 fontawesome icons you added come out blue because you have them wrapped in link tags. i.e <a>...</a>
And at the top of global.CSS you have this
a:link {
color: #0072BC;
text-decoration: none;
}
a:visited {
color: #0072BC;
text-decoration: none;
}
a:hover,
a:active {
color: #0072BC;
text-decoration: underline;
}
which makes the default link color blue.