How to extract an icon from a multi icon png

[Alberto]

Hi,
How can I use an icon from the multi icons png provided?
I want to use it in a browse column.
Thanks

[DonRidley]

https://www.w3schools.com/css/css_image_sprites.asp


<img id="home" src="img_trans.gif"> - Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS
width: 46px; height: 44px; - Defines the portion of the image we want to use
background: url(img_navsprites.gif) 0 0; - Defines the background image and its position (left 0px, top 0px)

[Alberto]

Thanks Don,
So, if I want to use one of this icons in a NT button Ill have to do a class for each icon?
like:

.my-calc-icon-button {
    width: 46px;
    height: 44px;
    background: url('img_navsprites.gif') -70px 15px;
}

and hows the better way or software to, given the collection, know wich is the top and left of the image you want?

[DonRidley]

I'm not sure. 

You can use your the inspection tool in Firefox or Chrome and edit the class' CSS attributes in real time.  Adjust the left and top values until you get it where you want.  Then save your custom class values as you need.

Don

[bshields]

Hi,

Built into NetTalks jquery-ui.css files are the CSS styles you need.

If you go to http://jqueryui.com/themeroller/ and down to the "Framework Icons" heading, you'll see the built in icons NetTalk uses from jquery-ui.

You just need to hover over the icon you want to see its CSS class.

For example:

The alert (warning) icon's CSS style is:

ui-icon-alert

To use this inside NetTalk specify your CSS as:

'ui-icon ui-icon-alert'

So, you don't need to create your own CSS as its already done by jquery ui and included automatically as part of your NetTalk theme.

Regards
Bill

[DonRidley]

Good info Brian!

[Alberto]

Thanks Brian but... it does not work.
See atached image...
The NT change icon is still there and the calculator icon is shifted and then you can see three icons.
Another problem is that it depends on the Theme, se second image in Base.

[bshields]

Well it depends upon how you want to use it.

To make a button:

Text: ''<span class="ui-icon ui-icon-plus"></span>''
Css: nothing

Turn off jquery styling

It will definitely depend upon the theme as the CSS is a fundamental part of the theme.

[Alberto]

I dont want to make a button.
I just want to use one of the theme provided icon in a NT button, for example change the "Change" icon button.
How does Bruce use it?
He use this icons on all NT buttons.

[Bruce]

>> How can I use an icon from the multi icons png provided?
>> I want to use it in a browse column.

Column properties
Image tab
Display jQuery Icon.
Use the name, without the ui- part. (see attached pic)

[Alberto]

Sory but in a browse column button, a Change button in this case, I dont have this option.
This Tab hides when I choose Button.
see attavhed pic