Icon Request: fa-heart-half, fa-heart-half-o

[ben4d85]

A combination of the fa-heart and fa-heart-o icons in order to create a heart that is half full (with and without outline).

I would like the fa-heart series of icons to be expanded, such that it includes:

• fa-heart (already exists)
• fa-heart-half
• fa-heart-half-o
• fa-heart-o (already exists)

This is similar to the way that the fa-star series of icons works, i.e.

• fa-star (already exists)
• fa-star-half (already exists)
• fa-star-half-o (already exists)
• fa-star-o (already exists)

I assume that this small addition must be fairly simple to create based on the already existing assets. It would be of great help if this could be added to the project. Many thanks! :)

[ezfe]

👍

[simonfranz]

👍

[PoZu]

+1

[peedj]

+1

[philippeluickx]

+1
Would be also quite great to have the half on both sides

[jacobkossman]

+1

[nadyav]

plus 1 for fa-heart-half and fa-heart-half-o.

[CareLuLu-Gabriel]

+1

[kdisneur]

👍

[montecruiseto]

++1

[Martii]

+1 ... definitely please. :)

[openevocracy]

+1

[sagacitysite]

+1

[NickMihaiu91]

+1

[bbosternak]

+1

[Martii]

@ben4d85 and just about everyone else here...

Just want to make sure these graphic representations is what is being requested?

I'm far from a vector graphics expert but twiddled enough to get this done with the existing hearts and a difference applied in about hour or so.

---

P.S. To the maintainers.... CONTRIBUTING.md is a little confusing... not accepting icons yet accepting in the -wip branches?

[nadyav]

A half-heart icon is what being requested here. I also have created a workaround by absolutely positioning a full heart icon (pink) above another one (light gray) and displaying only half of it. Easy enough to implement but requires extra markup and styling. Would be so much easier to have an actual icon.

On Oct 8, 2015, at 12:08 AM, Marti Martz [email protected] wrote:

@ben4d85 and just about everyone else here...

Just want to make sure these graphic representations is what is being requested?

I'm far from a vector graphics expert but twiddled enough to get this done with the existing hearts and a difference applied in about hour or so.

—
Reply to this email directly or view it on GitHub.

[Martii]

There's actually a third possibility... heart-half (like demo'd above) with no fill just the outer stroke... although not sure how good that would look and might look better with closing the stroke instead of just open.

The fa-heart-half-o.svg demo'd above is what our project is looking for as a simple, visual decrease/increase (flipped with CSS) in our rating system.

[meepoSenpai]

+1 for the half-heart representations above.

[joebartels]

+1

would love (pun intended) the top level heart to be half filled

[ghost]

+1

[nadyav]

In the meantime, if you need a half-icon, feel free to use this method. It works for any FontAwesome icon.

<ul>
  <li class="fa fa-heart pink"></li>
  <li class="fa fa-heart gray"></li>
</ul>

.fa{
    position:absolute;
    font-size:160px;
    color: #aaaaaa;
}
.gray{
    color:#E72D9E;
    overflow:hidden;
    width:80px;
}

https://jsfiddle.net/nadyav/614yyf7q/

[mattkomarnicki]

+1

Any progress with this one? That icon would be extra handy when doing rating system based on hearts rather than stars where rating like 4.5 / 5.5 is possible...

[Jdepontbriand13]

👍🏽

[Masa-Shin]

+1

[sensibleworld]

Hey folks. This is available in the version 6 alpha release: https://fontawesome.com/download