Fonts? image sizing?

Questions about Thunkable
1

A few questions:

  1. Does Thunkable X allow a different font? I want to use the material font for icons in my app like with thunkable android.

  2. I am trying to set an image to be sized nicely on thunkable X and cannot figure this out. Also, the image in my app doesn’t show on thunkable live, making it difficult to test.

My app: https://ios.thunkable.com/copy/5afaf197ae11b70001ee7b39 and the f logo at the top is what I want to be as large but not distorted as possible, occupying just 10% of the top. any help is appreciated!

  1. the images on android (i dont know about ios) don’t display for the png icons I am using at the bottom of the screen. i don’t like the idea of using the absolute size for these icons but any other setting seems to distort how they look or make them too small/big

thanks y’all

2

Hmm. The impression is that the function of displaying the background image for button does not work at all. I on iOS 11.3 and the emulator of Android 7.1 do not display a picture on the button neither png, nor gif, nor jpg.

3

So how should I go about making a clickable picture?

4

Previously, you used Unicode characters on the buttons as icons. They did not suit you with something?

5

ya, they are ugly and they don’t work for our school logo :-/

6

Hi Maxim,

Alternatively you can use the buttons as graphical html link in the component Web Viewer.

graphlink
graphlink795×92 3.8 KB

In the upper text block copy:

data: text/html, <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />

To the lower text block copy:

<img src = "data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" onclick="location='tel:5042862600'"/>

If you use png images, then instead of image/gif you need to specify image/png

To convert the image to base64 format, there are online converters, for example this.

7

I found a way to make a button that uses an image as its background - place it above the image component:

  • Add Row (Width and Height = Fit contents) to the screen
  • Add to Row Image and Button
  • Load image to Image
  • Set Button BackgroundColor = transparent
  • Set the Image property Position = absolute

After that, the button will be positioned above the image and it will remain to align them dimensions.

8

So is this the only way to make a button have a viewable image? I have done a large portion of my app but I have this exact same problem on my iOS device where it is not visible (except for one of them for some reason).