Font-Awesome
Font-Awesome copied to clipboard
FortAwesome
Icon Request: Ko-Fi
Ko-Fi is a website built around the idea of "buy me a coffee"! You click the button, are redirected to a page, and can donate money to that account, along with a message (if you wish). Providing an icon for this could provide a lot of use for emerging content creators on the web.
I want this one as well :) Will create my own if it's not on the horizon
+1, Ko-Fi has grown in popularity, or at last it seems that way. Would be really nice to have this one.
For a solution using FA only until the icon is added, you can decently emulate the Ko-fi logo by using pseudoelements to combine multiple FA icons.
HTML:
<i class="fas fa-mug-hot ko-fi"></i>
CSS:
.ko-fi::after {
content: '\f004';
font-weight: 900;
font-size: 15px;
color: #fff;
position: absolute;
margin: 20px 0 0 -32px;
}
You'll need to adjust the color, font-size, and margins to center the heart inside the icon and customize it to your liking.
Rough examples I threw together for fas fa-mug-hot, fas fa-mug, and far fa-mug:
Emulating the actual logo with both fas fa-mug-hot (free option) and fas fa-mug (pro option) (mug is #fff, background is #29abe0, heart is #ff5e5b):
compare to actual logo:
Things to note:
- If you're not planning on using the chosen mug icon anywhere else in the project, you could easily just add the ::after to the icon's class name in your css instead of creating a unique class like I did.
- You don't need to specify the font-family if you're adding it to the icon's HTML tag.
- You don't need to specify font-weight if you choose to use a solid mug, but you do need to set the font-weight to 900 if you want to keep the solid heart when adding it to a regular or light mug icon.
- Font Awesome's site has more info on using icons in pseudoelements.
Hope this helps!
Any news about this icon request? The issue still open since 2018...
BTW, +1! Thanks!
Ciao @fbaldassarri!
You may be interested in taking a look at our Icon Leaderboard FAQs, they contain a lot of information about how requests work
I took @paw's CSS and juiced it up a bit to require only a fa-ko-fi class. I'm also using em units instead of pixels to avoid everything going pear-shaped at different sizes. I'm using the coffee icon and trimming the saucer off with some more styling.
https://haliphax.dev/2022/06/ko-fi-icon-for-fontawesome/
+1 I can certainly use this. I've seen a few posts from users that combined existing icons to get something similar to the brand logo, but that solution isn't as useful when using icons in non-web applications.
@robmadole Any progress here? Ko-fi is pretty popular (and has been for a while). Everything has been provided (including vector art)
