Page 1 of 3
Fontawesome Icon Library - Funky Icons
Posted: Sun May 03, 2026 1:15 pm
by burt
upgrade_icons.png
Do they look different to yours?
They are just Fontawesome...
Re: Icons in the Footer
Posted: Sun May 03, 2026 9:08 pm
by burt
A quick trick: solid background behind any brand icon
Font Awesome icons (a good example is `fa-square-facebook`) are just a background with a `cut-out`.
If you put them on a background, the cut-out takes the background colour, right?
On the usual "light grey" footer...
Code: Select all
<i class="fab fa-square-facebook fa-2x"></i>
produces this:
f_1.png
So we make the background a nice `Facebook Blue` easily enough
Code: Select all
<i class="fab fa-square-facebook fa-2x" style="color: #1877F2;"></i>
which changes the icon like this:
f_2.png
The problem
I want that cut-out "f" to be white. It's taken some effort, and I think this is a novel approach. At least I have never seen anyone cosmetically layering FA icons in quite this way.
Cosmetically Stacking
Code: Select all
<span class="fa-stack">
<i class="fas fa-square fa-stack-2x" style="color: #fff;"></i>
<i class="fab fa-square-facebook fa-stack-2x" style="color: #1877F2;"></i>
</span>
ends up like this:
f_3.png
What's happening here?
Two icons on top of each other:
1. A white square (background) making that cut-out "f" white.
2. The blue(foreground)
`fa-stack` keeps them perfectly aligned.
Both use `fa-stack-2x` so they're the same size.
Result
A solid Facebook icon you can put anywhere - white background, blue logo.
Re: Icons in the Footer
Posted: Sun May 03, 2026 9:16 pm
by burt
Now you have the knowledge to inject a little bit of colour into your Fontawesome Icons. Get involved...
Let's make a library of funky FA icons.
If you come up with something awesome ...
PLEASE share your code and a (small!!) screenshot of the end result.
To make things as easy as possible, here is a Linter.
https://phoenixcart.org/linter.php
Just paste some code in the Left, and then press the >Render button.
Output of that code is on the right.
---
Easy to screenshot, like I have in the posts below.
Easy to paste code, inside the usual
code tags, as in the posts below.
Now there really is no excuse to not get involved 
Re: Icons in the Footer
Posted: Mon May 04, 2026 8:24 am
by burt
Facebook
linf-fb.png
Code: Select all
<span class="fa-stack">
<i class="fas fa-square fa-stack-2x" style="color: #fff;"></i>
<i class="fab fa-square-facebook fa-stack-2x" style="color: #1877F2;"></i>
</span>
Re: Fontawesome Icon Library - Let's Do It
Posted: Mon May 04, 2026 2:37 pm
by burt
Whatsapp
lint-whatsapp.png
Code: Select all
<span class="fa-stack">
<i class="fas fa-square fa-stack-2x text-white"></i>
<i class="fab fa-square-whatsapp fa-stack-2x text-success"></i>
</span>
Note that if the bootstrap colours near enough match, you can use them (as above) rather than "style".
Re: Fontawesome Icon Library - Let's Do It
Posted: Tue May 05, 2026 8:04 am
by burt
Mastercard
lint-mastercard.png
Code: Select all
<span class="fa-stack">
<i class="fas fa-square fa-stack-2x" style="background: linear-gradient(90deg,#eb001b 0%,#eb001b 40%,#f79e1b 60%,#f79e1b 100%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; color: transparent;clip-path: inset(0 0 25% 0);"></i>
<i class="fas fa-square fa-stack-2x" style="color:#fff; clip-path: inset(75% 0 0 0);"></i>
<i class="fab fa-cc-mastercard fa-stack-2x text-black"></i>
</span>
Far more complicated, but shows possibilities.
Re: Fontawesome Icon Library - Funky Icons
Posted: Wed May 06, 2026 8:37 am
by burt
Pinterest
lint-pinter.png
Code: Select all
<span class="fa-stack">
<i class="fas fa-square text-white fa-stack-2x"></i>
<i class="fab fa-square-pinterest fa-stack-2x" style="color: #E60023;"></i>
</span>
Re: Fontawesome Icon Library - Funky Icons
Posted: Thu May 07, 2026 8:52 am
by burt
Reddit
lint-red.png
Code: Select all
<span class="fa-stack">
<i class="fas fa-circle text-white fa-stack-2x"></i>
<i class="fab fa-reddit fa-stack-2x" style="color: #FF4500;"></i>
</span>
<span class="fa-stack">
<i class="fas fa-square text-white fa-stack-2x"></i>
<i class="fab fa-square-reddit fa-stack-2x" style="color: #FF4500;"></i>
</span>
Noting that some circular icons also work well.
Re: Fontawesome Icon Library - Funky Icons
Posted: Thu May 07, 2026 9:00 am
by bonbec
That's a great idea; it can add some color to the icon area.
I don't know if you're familiar with ColorZilla (I use it with Firefox), but it lets you retrieve the colors used on web pages, logos, etc. ... handy for setting the icons to their actual colors.
colorzilla.jpg
Re: Fontawesome Icon Library - Funky Icons
Posted: Thu May 07, 2026 11:16 am
by burt
bonbec wrote: ↑Thu May 07, 2026 9:00 am
That's a great idea; it can add some color to the icon area.
Agreed!
I had forgotten about colorzilla - thanks for the reminder.