79754725

Date: 2025-09-03 14:27:27
Score: 0.5
Natty:
Report link

You need to have ::before and ::after class overlap with font-weight and opacity different for each icon.

In my example, I will use the tick icon.

enter image description here

CSS code...

.container-01:before {
    font-family: "Font Awesome 5 Free";
    font-size: 22px;
    font-weight: 400;
    color: #1e3050;
    content: "\f058";
    opacity: 1;

    position: absolute;
    top: 5px;
    right: 25px;
}

.container-01:after {
    font-family: "Font Awesome 5 Free";
    font-size: 22px;
    font-weight: 900;
    color: #a5acb9;
    content: "\f058";
    opacity: 0.4;

    position: absolute;
    top: 5px;
    right: 25px;
}

Take note of the font-weight and the opacity

Reasons:
  • Probably link only (1):
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Low reputation (0.5):
Posted by: James Osguthorpe