Font-awesome: Icon Request: fa-heart-half, fa-heart-half-o
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! :)
ben4d85
All 26 comments
:+1:
ezfe
on 14 Jul 2014
:+1:
simonfranz
on 20 Jul 2014
+1
PoZu
on 5 Aug 2014
+1
peedj
on 8 Aug 2014
+1
Would be also quite great to have the half on both sides
philippeluickx
on 11 Aug 2014
+1
jacobkossman
on 23 Jan 2015
plus 1 for fa-heart-half and fa-heart-half-o.
nadyav
on 2 Feb 2015
+1
CareLuLu-Gabriel
on 4 Mar 2015
:+1:
kdisneur
on 22 May 2015
++1
montecruiseto
on 20 Jun 2015
+1 ... definitely please. :)
Martii
on 7 Aug 2015
+1
openevocracy
on 2 Sep 2015
+1
sagacitysite
on 2 Sep 2015
+1
NickMihaiu91
on 23 Sep 2015
+1
bbosternak
on 25 Sep 2015
@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?
Martii
on 8 Oct 2015
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.
nadyav
on 8 Oct 2015
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.
Martii
on 8 Oct 2015
+1 for the half-heart representations above.
meepoSenpai
on 12 Nov 2015
+1
would love (pun intended) the top level heart to be half filled
joebartels
on 9 Mar 2016
+1
alberto175
on 17 Mar 2016
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;
}
+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...
mattkomarnicki
on 1 Jul 2016
👍🏽
Jdepontbriand13
on 28 Feb 2017
+1
Masa-Shin
on 11 Jun 2018
Hey folks. This is available in the version 6 alpha release: https://fontawesome.com/download
sensibleworld
on 4 Nov 2020
Related issues
brystfire08
·
3Comments
rufengch
·
3Comments
lickmydesign
·
3Comments
petermolnar
·
3Comments
yarcowang
·
3Comments
Most helpful comment
In the meantime, if you need a half-icon, feel free to use this method. It works for any FontAwesome icon.
https://jsfiddle.net/nadyav/614yyf7q/