For igniteui 2014.2 and 2015.2, to use a different icon for the expand/collapse, we would just set a different background-position. For 2016.1 this no longer works. In fact, we notice that almost all background-image styles have been changed to 'none'. The expand/collapses icons are always +/-.
How do we now select a different icon now for hierarchical grid expand/collapse and igcombos (for the dropdown icon)?
/*.ui-icon-plus{background-position:-16px -128px}*/.ui-icon-plus{background-position:-32px 0px}/*.ui-icon-minus{background-position:-48px -128px}*/.ui-icon-minus{background-position:-64px 0px}
As I continued to research, it would appear that Infragistics is now using Unicode values in the Private Use Area, however, where can I find a list of the Unicode assignments Infragistics has made to the various icons?
I finally found the Unicode I needed, but it would be nice to have a place where we could see the Unicode listed against the actual image/character.
In conjunction with this, we need to override, for example, the image/character just in the dropdown box for an igCombo. How do we do that now that unicodes are used, especially if our icon is not one of the Unicode defined characters?
Hello,
Thank you for posting in our community.
Since 15.1 version of IgniteUI, we have entirely new igCombo widget, which is different than the old one and respectively its styling structure is different.
My suggestion is to have a look at our migration topic. Also we have classes which represents image on drop down button.
I hope you will find both links helpful.
Looking forward for your reply.
Thank you for your response. I reviewed both of the suggested links. Unfortunately, neither provides the desired information.
As stated, we have been using 2015.2. The technique used to specify the icon for the button in the igCombo widget for 2015.2 was to reference one of the icons in a multi-icon image. It was easy to view the full image to find a different icon to be used and to modify the background-position accordingly to point to a different icon.
For 2016.1, the icon is defined by a Unicode value in the value range that is user-definable (i.e. defined by Infragistics). The question is where can we easily view each of the characters associated with the Unicode values which Infragistics has defined. There doesn't appear to be an easy way to determine which Unicode to use if we don't want to use the one configured by default.
The other part of the question is how to specify a different icon that has no associated Unicode value defined? It would appear that many of the classes continue to define a background-position, but these positions are not used since they don't point to any multi-icon image file.
Thank you for the update. I have discussed this with my team and the Unicode font used can be seen in the following links:
http://mkkeck.github.io/jquery-ui-iconfont/
https://github.com/mkkeck/jquery-ui-iconfont
The Unicode characters used by Infragistics cannot be viewed on the indicated website. As already stated, Infragistics is using codes in the range designated as Private Use Area codes. For instance, the class for the minus character is defined as ".ui-icon-minus:before{content:'\e67b'}". If I understand this correctly, the Unicode character defined to display the minus character is \e67b. If you go to the link below you'll see that there are no defined characters in this range. Infragistics is defining the fonts used somewhere, but how to see all of them still eludes me. Perhaps I'm misunderstanding something, but I still have no idea how to view all of the Unicode fonts for those defined by Infragistics.
https://en.wikibooks.org/wiki/Unicode/Character_reference/E000-EFFF
Thank you for the update. Concerning your first question, If you want to see a list of Unicode characters you can go to the following link:
https://en.wikipedia.org/wiki/List_of_Unicode_characters
As for specifying the expand/collapse icons/text the current way to do this is as you mentioned of overriding the CSS classes for them.
I understand I can override a class. That is what I did once I was able to figure out which Unicode value to use in place of the default one.
The question is how can I see a list of all the fonts, the actual character that will be displayed, along with the associated Unicode? It is difficult to determine the Unicode value to use as an override if I don't know what the Unicode characters look like. In this case, Infragistics is using the Unicode values in the range that are for private use, so I can't go to any chart on the internet to see the character associated with each Unicode defined by Infragistics.
For example, we do not want to use the +/- characters in igHierarchicalGrids to represent expanded/collapsed rows. By trial and error we were able to figure out the desired Unicode for the class ui-icon-minus (-) was /e63a (same as class ui-icon-caret-d). So we set the Unicode associated with the minus to this new value.
1. How can I easily figure out what each class defined by a Unicode looks like without creating my own chart?
2. Is there a better way to specify different characters to use for expand/collapse for igHierarchicalGrid other than overriding the ui-icon-minus and ui-icon-plus classes?
Apologies for missing that, we have changed our styling structure, and we are not using sprites any more. We started to use CSS fonts in order to improve our touch capabilities. You can override .ui-icon-triangle-1-s class in order to set you custom image, or to use !important.