Icon color within text

Anvil Q&A
1

Hi! Is there a way to change the color of part of a text object? In this case, I’m thinking the color of the icon (but not the text itself).

Also wondering if it’s possible to do other functions within a text box, like bold, italics, urls, etc

Thanks!

2

Hello,

I don’t know how to change the icon color independently of text color; however, I suppose you could (1) upload a custom icon, or (2) put two components that display text inside a container and set one to the icon and the other to the text itself (thereby having control over both colors). I’m sure the Anvil folks will have a much nicer solution perhaps involving CSS.

As far as having other rich text features, yes, you can change text to have italics, bold, and underline. The IDE shows those in the properties side pane.

sc
sc.png429×510 16.8 KB

Of course these properties can also be changed using code:

self.text_box.bold=True

If you are looking to click text to trigger another operation (like downloading a file or visiting a URL), you could check out the link component.

I hope this helps.

1 Like
3

Hi Colette,

Setting icon colour independently of text colour

As predicted, here’s a solution, and yes, there is a tiny bit of CSS!

I created a Custom Component that allows you to set icon and text colours separately (garish colours optional):

image

You can clone the app into your account by clicking this link, and modify it to suit your needs:

https://anvil.works/build#clone:VUTJWCMKTSZOWIZX=KXDO7OZ77BUUCJ2K22TUCBSN

You can import this app into other apps in order to use the same component in multiple apps. See this section of the ref docs.

You can set the contents and colours using the text, icon, text_colour and icon_colour properties of the component:

image
image.png708×910 41.5 KB

It’s a Custom HTML Component with this in the HTML part:

<script>
  function setIconColour(colour){
    $(this).find('.anvil-component-icon').css('color', colour)
  }
</script>

It sets the Label text, icon, text colour and icon colour when the component’s show event fires:

  def form_show(self, **event_args):
    """This method is called when the HTML panel is shown on the screen"""
    self.label_1.text = self.text
    self.label_1.icon = self.icon
    self.label_1.foreground = self.text_colour
    self.call_js('setIconColour', self.icon_colour)

Labels and Links have properties for bold, etc.

As mentioned by @alcampopiano: Labels have properties to set bold, italics, underlining, fonts and font sizes, and alignment. You can use a Link component to display URLs and do something when the link is clicked (by default, they open the url property in a new browser tab.)

Rich text, compiling markup languages, and other fancy stuff

You can also do very detailed text styling using any third-party library. See this Forum thread for some discussion of that.

Currently installed on Server Modules are: Pygments for syntax highlighting, mistune for Markdown, and bbcode. Just ask if you want something installed.

You can import Javascript libraries to use on the client using Anvil’s Native Libraries, which you can find in the App Browser. In that Forum Thread I explain how to use highlight.js to perform syntax highlighting in the browser. (You can call JavaScript from the client-side Python)

image
image.png668×784 22 KB

I hope the IconLabel I made fits your use-case. Let me know whether it does, and if you need more info.

3 Likes