I have a variable setting the text on a page, and I want to have it so that a pencil icon is next to the text. To the right. The issue I have is that the text varies. Is there a way to add an icon after the text that is displayed from a variable?
For instance:
Administrator [[icon]]
User [[icon]]
Preferences [[icon]]
Simplest way is probably to use an icon/symbol font; setting the string as Rich Text and then mixing the fonts. The pencil would have to be a single colour - and you’d have to do font mapping if you were to distribute it - but it would work I’m sure.
The fontawesome font has a pencil icon…
Yes, using a symbol font is a good solution, @Mike_Gray, and works well, especially when you need to embed an icon in the middle of a text block.
However, finding, installing and testing/tweaking can sometimes make it less than simple–especially if you also need to set up web font mapping, for instance to make it work on mobile devices. If you need to use a custom icon, or one with multiple colors, states, photo image, etc. a different approach must be taken.
Recently, there was a thread where someone needed to make a repeater resize on text changes (Not fitting with “Fit to Content in HTML”), and the core issue was how to determine the exact width of proportional font text. It turns out there is an easy way to get this with javascript, and it can be easily injected with:
Where “newWidth” is a global variable and “myText” is the name of your widget containing the text.
See this .rp file for an example of using an image of a pencil that always gets moved 10px to right of text. Clicking the pencil will bring up an input field for “Enter your name” where you can enter any length of text to test it out.
ChangeTextWidgetSize.rp (58.5 KB)
Hi mbc66
Very good - and works very well!
Interested to hear the initial correspondent’s feedback - I’m not sure I’d say ‘easily’. It clearly works well (though there’s a slight lag on the reposition where you get text/image overlap).
Cheers
MG
Wow. I am learning so much from you guys. I thought about the font icon after posting, and it’s good to have an example. And the javascript is answers another question I was thinking about as I walked into the office this morning about reactive text. The font icon is probably the way I would go, as we will be loading fontawesome anyways, but will also keep the javascript example in mind, as I can see where that might be very useful.
I fought with this all morning. Kept seeing a box with a question mark. Then saw something about issues with FontAwesome 5. Needed to go down to 4.7. Now it seems to work. Just a heads up to anyone that is trying this.