Search code examples
htmlcssfont-awesomefavicon

Invert plus circle font awesome icon colors

I want the font awesome icon as the following image:

enter image description here

So I try to add that as the following code:

.custom-icon {
  position: relative; 
  color: #a3a1a1;
  font-size: inherit;
}

.custom-icon::before {
  content: '\f067';
  font-size: inherit;
  color: #a3a1a1;
  position: absolute;
  top: 0;
  left: 0;
}

.custom-icon::after {
  content: '\f055';
  font-size: inherit;
  color: transparent;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<i class="fa-solid fa fa-plus-circle fa-lg custom-icon"></i>

But it is not the same as the image, how can I invert the colors, outline the circle, paint the + icon inside the circle and remove color from the circle background?

Solution

  • Use the stack feature and merge two icons together

    .custom-icon {
  color: #a3a1a1;
  font-size: 25px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" />

<span class="fa-stack custom-icon">
  <i class="fa-regular fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-plus fa-stack-1x"></i>
</span>