Icon Request: Ko-Fi - Githubissues

ghost commented 6 years ago

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.

smeerws commented 6 years ago

+1

Grovkillen commented 5 years ago

I want this one as well :) Will create my own if it's not on the horizon

strongdoctor commented 5 years ago

+1, Ko-Fi has grown in popularity, or at last it seems that way. Would be really nice to have this one.

Grovkillen commented 5 years ago

https://simpleicons.org/?q=ko-fi

NigelIG commented 5 years ago

+1 Please add this icon!

thanon commented 5 years ago

+1, Any update?

paw commented 5 years ago

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: Ko-fi FA icon examples

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): Ko-fi logo made with FA Free icon fas fa-mug-hot Ko-fi logo made with FA Pro icon fas fa-mug compare to actual logo: Official Ko-fi 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!

ghost commented 4 years ago

home this one comes <3

skyrie commented 4 years ago

This would be a good icon to add!

LoaneShark commented 4 years ago

Still hoping this gets added, +1

mattholden commented 4 years ago

+1

fbaldassarri commented 3 years ago

Any news about this icon request? The issue still open since 2018...

BTW, +1! Thanks!

tagliala commented 3 years ago

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

cycool29 commented 2 years ago

+1

8fork commented 2 years ago

+1

thetrev commented 2 years ago

+1

Jarrich commented 2 years ago

+1

escapefuchal commented 2 years ago

+1

datallurgy commented 2 years ago

+1

somethingSTRANGE commented 2 years ago

+1

haliphax commented 2 years ago

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/

somethingSTRANGE commented 2 years ago

+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.