Hello all,
I am wondering what the best kind of icons are to use, where to get them and then how to use them within a web app?
For page and other object coloring, what is the best way to do that? I have a theme selected, but it only works on some of the objects.
Sorry if these things sound vague, they are since I don’t know how else to address them or ask the question,
Finally, are there any good samples or instructions for making these part of a xojo web app?
Thanks,
Tim
I am wondering what the best kind of icons are to use, where to get them and then how to use them within a web app?
Xojo Web supports Bootstrap Icons using WebPicture.BootstrapIcons. I’m not sure when they were last updated, but hopefully when Xojo moved to Bootstrap 5.x. I can’t speak much on this as I use FontAwesome icons via GraffitiSuite in my web apps, which allows me to, for instance, add a Label.Caption as:
<raw><i class='fas fa-spray-can'></i></raw>
For page and other object coloring, what is the best way to do that? I have a theme selected, but it only works on some of the objects.
As long as you’re using a Bootstrap 5.x theme, most things should theme properly. Those that don’t, you’ll have to either learn to modify the CSS yourself to account for them or report them to Xojo. Some style changes can be made with the Style property of WebUIControls to modify their WebStyle.
There are some Bootstrap Editors that you can find if you wish to customize a theme’s base properties. I think Bootstrap.build is one of the more popular ones. And there’s plenty of guides available via a quick search for customizing Bootstrap.
If you’re comfortable with CSS, you can also add <style></style>
blocks to the App.HTMLHeader property.
I also offer GraffitiStyle for advanced runtime CSS customization.
At the time of writing this, we are using Bootstrap Icons v1.11.1 (the latest available is v1.11.3). We update them regularly.
You can access them with WebPicture.BootstrapIcon. It supports coloring them using either arbitrary colors, or Bootstrap named colors.
For example, if you are using a WebImageViewer, you can use this code to display the “house” icon, with the Primary color fill:
Me.Image = WebPicture.BootstrapIcon("house-fill", ColorGroup.NamedColor("primary"))
Sample project:
bootstrap-icon.xojo_binary_project.zip (7.8 KB)
Here is a blog post that talks about Bootstrap named colors:
2 Likes