# Fonts? image sizing?

**URL:** <https://community.thunkable.com/t/fonts-image-sizing/27011>\
**Category:** Questions about Thunkable X\
**Created:** [May 15, 2018, 2:59pm UTC](https://community.thunkable.com/t/fonts-image-sizing/27011 "2018-05-15T14:59:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Maxim\_Lapushin](https://avatars.discourse-cdn.com/v4/letter/m/4491bb/32.png) [@Maxim\_Lapushin](https://community.thunkable.com/u/Maxim_Lapushin)\
**Post date:** [May 15, 2018, 2:59pm UTC](https://community.thunkable.com/t/fonts-image-sizing/27011/1 "2018-05-15T14:59:07Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [May 15, 2018, 3:42pm UTC](https://community.thunkable.com/t/fonts-image-sizing/27011/2 "2018-05-15T15:42:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Maxim\_Lapushin](https://avatars.discourse-cdn.com/v4/letter/m/4491bb/32.png) [@Maxim\_Lapushin](https://community.thunkable.com/u/Maxim_Lapushin)\
**Post date:** [May 15, 2018, 3:55pm UTC](https://community.thunkable.com/t/fonts-image-sizing/27011/3 "2018-05-15T15:55:21Z")

</div>

So how should I go about making a clickable picture?

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [May 15, 2018, 7:05pm UTC](https://community.thunkable.com/t/fonts-image-sizing/27011/4 "2018-05-15T19:05:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Maxim\_Lapushin](https://avatars.discourse-cdn.com/v4/letter/m/4491bb/32.png) [@Maxim\_Lapushin](https://community.thunkable.com/u/Maxim_Lapushin)\
**Post date:** [May 15, 2018, 7:25pm UTC](https://community.thunkable.com/t/fonts-image-sizing/27011/5 "2018-05-15T19:25:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [May 16, 2018, 6:37am UTC](https://community.thunkable.com/t/fonts-image-sizing/27011/6 "2018-05-16T06:37:31Z")

</div>

Hi Maxim,

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

 ![graphlink](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/d/3ddf666dddac060d4ebaf9462fb9f3259718d1be.png)

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](https://www.base64-image.de/).

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [May 16, 2018, 11:23am UTC](https://community.thunkable.com/t/fonts-image-sizing/27011/7 "2018-05-16T11:23:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Lea\_Monty](https://avatars.discourse-cdn.com/v4/letter/l/ea666f/32.png) [@Lea\_Monty](https://community.thunkable.com/u/Lea_Monty)\
**Post date:** [March 4, 2019, 11:16pm UTC](https://community.thunkable.com/t/fonts-image-sizing/27011/8 "2019-03-04T23:16:37Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 12:02pm UTC](https://community.thunkable.com/t/fonts-image-sizing/27011/9 "2024-11-08T12:02:47Z")

</div>