Fontawesome Icon Library - Funky Icons

[burt]

upgrade_icons.png

Do they look different to yours?
They are just Fontawesome...

[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.

[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

[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>

[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".

[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.

[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>

[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.

[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

[burt]

That's a great idea; it can add some color to the icon area.

Agreed!

I had forgotten about colorzilla - thanks for the reminder.