Gabriele Ferro Home

Font Awesome icons with a Color Gradient

Day29: 20 August 2020

**Today’s Progress:**

In the third OpenClassRooms project I used a lot of gradients, even for icons. I like the idea but it might impact the accessibility of our content.

For the fifth project there is a shopping cart icon with a gradient, so I had to code it.

The minimalist default solid color, sometimes, it needs a little touch of personality.

All 1.598 Awesome Icons offered by Font Awesome for free, can be colored with beautiful gradients.

A careful choice must be made to pick colors to avoid accessibility problems.

In general, the process is very easy:

  1. Choose an icon, for example the Shopping Cart or the Store;
  2. Use Gradienta Editor;
  3. Put all together in CSS.

We can also choose a Coolors palette, or pick them one by one using a color-picker (Firefox has it by default).

A tiny bit of Color Theory may also helps better understand the situation.

And then… since programming is like a gradient... I went from bright to darkest colors...

I've tried several times to code "this thing" which should be a shopping cart like in a classic e-commerce site.

Got errors



Tried to write this class in a separate file, then code a few static methods to add, remove and clear my cart.

It does not work.


**Link to tweet:**

[twitter-follow screen_name='20Gabriele20']

July 2024


Gabriele Ferro Home
Copyright © Ferro Gabriele. All rights reserved.