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

[rhansen]

How about this, intended to match the style of grip-lines:

https://jsfiddle.net/2rt6of80/

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
<cc:license rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/"/>
</cc:Work>
<cc:License rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
<cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/>
<cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/>
<cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/>
</cc:License>
</rdf:RDF>
</metadata>
<g fill-rule="evenodd">
<path d="m38.627 512c-4.2435 0-8.3131-1.6857-11.314-4.6863l-22.627-22.627c-6.2484-6.2484-6.2484-16.379-1e-7 -22.627l457.37-457.37c6.2484-6.2484 16.379-6.2484 22.627-7e-7l22.627 22.627c3.0006 3.0006 4.6863 7.0702 4.6863 11.314 0 4.2435-1.6857 8.3131-4.6863 11.314l-457.37 457.37c-3.0006 3.0006-7.0702 4.6863-11.314 4.6863z"/>
<path d="m219.65 512c-4.2435 0-8.3131-1.6857-11.314-4.6861l-22.628-22.628c-6.2483-6.2483-6.2483-16.379 1e-4 -22.627l276.35-276.35c6.2484-6.2484 16.379-6.2484 22.627 0l22.627 22.627c3.0006 3.0006 4.6863 7.0702 4.6863 11.314s-1.6857 8.3131-4.6863 11.314l-276.35 276.35c-3.0006 3.0006-7.0702 4.6863-11.314 4.6863z"/>
<path d="m400.67 512c-4.2435 0-8.3131-1.6857-11.314-4.6863l-22.627-22.627c-6.2484-6.2484-6.2484-16.379-4e-5 -22.627l95.334-95.334c6.2483-6.2483 16.379-6.2483 22.627 4e-5l22.627 22.627c3.0006 3.0006 4.6863 7.0702 4.6863 11.314s-1.6857 8.3131-4.6863 11.314l-95.334 95.334c-3.0006 3.0006-7.0702 4.6863-11.314 4.6863z"/>
</g>
</svg>

[designbyadrian]

How about this, intended to match the style of grip-lines:

https://jsfiddle.net/2rt6of80/

I like how that SVG is 4/5 just metadata 🤣

[sensibleworld]

This is a quick update to let folks know that we’re refining our icon request workflow behind the scenes, and as part of that we’re going through all open requests and filing them into several new buckets to be addressed.

In this case we’ve added this issue to our new list to be created! We can’t promise any firm timelines right now, but this will help us keep track of it.

We’ll update this issue when the icon is released into the wild 🙂