Ko-fi icon for FontAwesomeTags:
FontAwesome is a pretty great resource. I use it extensively on this site. In addition to loads of useful UI icons, it also has a brands icon set, which you can see examples of in the "Socials" section of my site menu. What you may not immediately be aware of, though, is that I had to cobble the Ko-fi icon together using CSS chicanery.
I guess there's a pretty extensive process for getting icons added to the FontAwesome library, and Ko-fi hasn't yet made the cut. In the meantime, I was able to combine the
heart icons to act as a stand-in:
<i class="fas fa-ko-fi"></i>
/* ko-fi icon */
margin: -0.45em 0 0 -0.2em;
margin: 0.5em 0 0 -2em;
::after pseudo elements use the
content property to display the
heart icons, respectively. A combination of
margin are used to truncate the "saucer" component of the
coffee icon and resize the result. This step is necessary since the free icon set does not include the
mug icon, which has no saucer. Finally,
margin are used to shrink the
heart icon and move it into place over the mug.
Since em units are being used for the icon sizes and offsets, you should be able to adjust the font size of the containing element without upsetting the icons' overlapping positions.
fasclass is for solid icons. The
contentproperty value will be displayed using whichever font set you chose (e.g.
::afterelement's color is set to black in this example, which may not work with the color scheme for your site.