Fontawesome Icon Library - Funky Icons

[burt]

Instagram

lint-insta.png

Code: Select all

<a href="https://insta.com" class="text-decoration-none">
  <span class="fa-stack">
    <i class="fas fa-square text-white fa-stack-2x"></i>
    <i class="fab fa-square-instagram fa-stack-2x"
       style="background: linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;">
    </i>
  </span>
</a>

[burt]

Youtube

lint-yt.png

Code: Select all

<span class="fa-stack">
  <i class="fas fa-square text-white fa-stack-2x"></i>
  <i class="fab fa-square-youtube fa-stack-2x" style="color: #FF0000;"></i>
</span>

[martindavinci]

In my shop, the “background” remained dark because it was causing issues in my user.css. This is how I fixed it:
<i class="fas fa-square text-white-1 fa-stack-2x" style="color: #fff;"></i>

[burt]

LinkedIn

lint-in.png

Code: Select all

<span class="fa-stack">
  <i class="fas fa-square text-white fa-stack-2x"></i>
  <i class="fab fa-linkedin fa-stack-2x" style="color: #0A66C2;"></i>
</span>

[burt]

X, the artist formerly known as Twitter

lint-x.png

Code: Select all

<span class="fa-stack">
  <i class="fas fa-square text-white fa-stack-2x"></i>
  <i class="fab fa-square-x-twitter fa-stack-2x" style="color: #000000;"></i>
</span>

[burt]

On Fire

lint-fire.png

Code: Select all

<span class="fa-stack">
  <i class="fas fa-circle fa-stack-1x" 
    style="color:#e05a00; -webkit-text-stroke: 3px #cc4f00;"></i>
  <i class="fas fa-fire fa-stack-2x" style="color:#ff6a00;"></i>
</span>

Notice, three fire colours....

[burt]

Google

lint-google.png

Code: Select all

<span class="fa-stack">
  <i class="fas fa-square fa-stack-2x" style="color:#ffffff;"></i>
  <i class="fab fa-google fa-stack-2x" style="background: conic-gradient(#4285F4,#EA4335,#FBBC05,#34A853,#4285F4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;">
  </i>
</span>

[burt]

I'll stop here since there's not much interest. But hopefully it's shown readers that Fontawesome Icons don't have to be the generic small and grey.

I made the Linter to make it really easy to join in the `fun` Anyway, if anyone does come up with some cool icons (they don't have to be brands, see the Fire one for example), please take a minute and share

Here's that Linter: https://phoenixcart.org/linter.php

[cbs]

Do you have the code for Bluesky?

[burt]

Do you have the code for Bluesky?

You might give it a go - that's why I built the Linter - easy experimentation, no effort.

https://fontawesome.com/search?q=bluesky
https://phoenixcart.org/linter.php

If you make something cool, please share the funk