Font-awesome: Icon Request: fa-plus-minus

Created on 6 Jul 2015 · 26Comments · Source: FortAwesome/Font-Awesome

I'd like to request a new icon, fa-plus-minus. The icon itself would look like this: +/-

_Use Case:_ I have a screen where users manage lists of items. Currently, I use an 'edit' icon (fa-pencil) that changes the UI so that the user can manage that list (add items or remove items). I've found from a lot of user feedback that the 'edit' icon is somewhat confusing. For whatever reason they believe the 'edit' icon is for renaming things and not for adding/removing things. I think this new icon would be much clearer for uses like this.

in progress new icon web application icons

Source

jcarenza

👍88 🎉4 😄4 ❤1

Most helpful comment

± 1

gangstead on 28 Jun 2019

🎉6

All 26 comments

ameesme on 28 Apr 2016

aerichmond on 17 Jun 2016

maverick42 on 16 Jul 2016

Ishangidwani on 30 Nov 2016

j3rm on 11 Jan 2017

+100

TempestaWeb on 13 Mar 2017

konuch on 18 Mar 2017

susanmoulton on 11 Aug 2017

m3mo89 on 26 Sep 2017

kincaider on 28 Sep 2017

fmouth on 4 Oct 2017

SergoQA on 20 Oct 2017

mariovelandia on 15 Jan 2018

Devnsyde on 12 Feb 2018

Nicobile on 13 Apr 2018

MEChasle on 31 Oct 2018

± 1

gangstead on 28 Jun 2019

🎉6

abaar on 13 Oct 2019

jonrz on 12 Nov 2019

flopibaka on 26 Nov 2019

PinkMeNow on 12 Feb 2020

skbly7 on 15 Mar 2020

This can be achieved using the new power transforms + stacks.

Here is + above -.

<span class="fa-stack fa-2x">
  <i class="fas fa-plus fa-stack-1x" data-fa-transform="shrink-8 up-3"></i>
  <i class="fas fa-minus fa-stack-1x" data-fa-transform="shrink-8 down-3"></i>
</span>

And this is a version of + / -

<span class="fa-stack fa-2x">
  <i class="fas fa-plus fa-stack-1x" data-fa-transform="shrink-8 up-4 left-3"></i>
  <i class="fas fa-horizontal-rule fa-stack-1x" data-fa-transform="shrink-8 rotate--45"></i>
  <i class="fas fa-minus fa-stack-1x" data-fa-transform="shrink-8 down-4 right-3"></i>
</span>

sowenjub on 18 Mar 2020

👍4

@sowenjub, thanks for the tip.

With your solution, I get
before

With documentation and few adaptations, I get
after

<span class="fa-stack" style="font-size: 0.5em;">
    <i class="fas fa-plus fa-stack-1x" data-fa-transform="grow-5 up-7"></i>
    <i class="fas fa-minus fa-stack-1x" data-fa-transform="grow-5 down-10"></i>
</span>

MEChasle on 19 Mar 2020

👍3

@MEChasle This is probably better. I got the same issue but didn't investigate because I changed my mind and used text instead. Glad the tip helped :)

sowenjub on 22 Mar 2020

Maybe +/- also?