Font-awesome: Icon request: icon-resize-grip

[OlegKi]

Hi!

I try to improve look of popular jqGrid plugin which can be used to display grids. It uses jQuery UI CSS framework. In the answer I posted the first attempt to replace jQuery UI Icons to the corresponding icons of Font Awesome.

The problem is that I don't fond any icons which can be used instead of ui-icon-gripsmall-diagonal-se which is the standard icon used in resizable dialog (see here). I marked the icon which I mean red on the image below. So looks like the dialog after 400% scaling

(one see very clear the differences in quality between some Font Awesome icons which I use already and the resizable icon ui-icon-gripsmall-diagonal-se)

The implementation of the "resizable" icon should be not complex, but I hope it would be helpful for many other users who prefer to use more Font Awesome instead of standard jQuery UI icons.

Best regards
Oleg

[msegado]

(Added clarification to Issue #816 to distinguish it from this one.)

[xcorat]

I would like to have this too, any updates?
Thanks :)

[tablatronix]

ditto

[amergin]

+1 for grip and drag icons.

[ghost]

+1

[neuraltoys]

+1 especially for the corner grip one, it's the last one I'm missing in my UI (to resize components)

[panicbus]

yes please, drag icon!! amazing that this doesn't exist yet

[smartcorestudio]

+1

[alexsielicki]

+1

[tshead2]

+1

[TLJens]

+1

[SeyZ]

+1

[guylando]

Use fa-signal for this purpose.
With the following css properties:
left: initial;
right: 4px;
bottom: 0px;

[mvanderlee]

You can use fa-th and clip it:

<i class="fa fa-th"/>

.fa-th {
  clip-path: polygon(100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 60%, 0% 60%, 0% 100%, 100% 100%);
}

JsFiddle

For IE, since it doesn't support clip-path

<svg viewbox="0 0 20 20" height="14px" width="14px">
  <clipPath id="mask">
    <path d="m 0 20 v -6.5 h 7 v -6.5 h 7 v -6.5 h 7 v 20 h -20">      
  </clipPath>

  <image clip-path="url(#mask)" href="https://use.fontawesome.com/releases/v5.0.13/svgs/solid/th.svg" height="20px" width="20px" />
</svg>

https://codepen.io/DDuTCH/pen/jKWJOB

I needed to change the color, which I couldn't figure out for IE except by modifying the th svg directly

<svg viewbox="0 0 512 512">
  <path fill="#4484ba" d="M330.664 296 v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"/>
</svg>

https://codepen.io/DDuTCH/pen/NzxVJN

[rivera-irving]

+1