2. ASPRunner.NET General questions
  3. [SOLVED]  data-icon attribute
This topic is locked
[SOLVED]

 data-icon attribute

 		6/1/2016 9:59:27 AM
ASPRunner.NET General questions
Pete K author

My client didn't like the icon that is displayed in a master-detail situation to reveal the detail records. She wanted something like a folder with a plus (+) sign. I located the relevant part of the page and noticed that this is implemented with an html <A> element with an attribute: data-icon="details". I have no idea how this works, but I started playing around with it, changing the data-icon attribute to random words like view, edit, and anything else I could think of and was surprised to find that there are many images that can be displayed this way. Eventually, I stumbled on a name that got me a plus sign (data-icon="add") and the client is happy, so problem solved. But now I'd like to know if all of the possibilities are documented somewhere?
Admin 6/1/2016

There is no easy answer to that but here is something you can do.

  1. Check default.css file in output/styles. You should see sections like this:

[data-icon=print]:before {

content: 'e';

}


You can see that 'e' letter is associated with printer icon.
2. To see all icons proceed to output/fonts and double-click on runner2.ttf file. It will open as a regular font. Check the top line. You can see that icon #5 (e) is a printer icon. This can help you see which other icons are there and what letters/data-icon attributes they associated with.
Pete K author 6/1/2016

Thanks. That helps.
T
 		Tim 6/1/2016

Wow, this is a great tip, Pete. Thanks. I much prefer the plus sign to the other details icon.
Tim
Pete K author 6/3/2016



Wow, this is a great tip, Pete. Thanks. I much prefer the plus sign to the other details icon.
Tim


Thanks, and I agree Tim. I think most Windows users are accustomed to the plus sign representing an expandable container, so it's more intuitive.