Not sure if the following is possible but I'm going to take a punt that it is and that it's all doable with CSS. So given that I'm still playing catch up in that area, I was wondering (hoping) that someone might be able to give me a few pointers....

For a starting point, we'll take the DemoSwipeableCards.wo in the WebOrderMobile sample application. This is set with pbSwipeCards to True and psCSSClass to "WithBullets". At runtime this gives a nice swipeable card container, with bullets at the bottom of the control. The current card is identified via a highlighted "bullet". All good.

What I'm curious to know is whether it is possible (and how it might be done) to replace those bullets with Icons - preferably Font Icons. So for the sake of this example, let's imagine we're talking about the out of the box icons - say, Info, Find, Print and Delete. And then to identify the "current" card by showing the icon for that card as slightly larger than the others.

So 4 swipeable cards, 4 different font icons (instead of bullets) and with the icon for the current card made larger than the other 3.

I guess I'm looking here for a "yes, it is possible" (that would be a good start!) and then obviously anything else would be a bonus (I know I'm going to need lots of help here).

Thanks!