# How to add an icon/text inline with the sidebar menu?

**URL:** <https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285>\
**Category:** Ask for Help\
**Created:** [May 2, 2021, 2:32am UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285 "2021-05-02T02:32:23Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pat](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pat/32/25826_2.png) [@Pat](https://community.glideapps.com/u/Pat)\
**Post date:** [May 2, 2021, 2:32am UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/1 "2021-05-02T02:32:23Z")

</div>

I am looking at some other examples of Glide apps and I’ve noticed that it is possible to have an icon/text displayed inline with the sidebar menu. For example:

![Screen Shot 2021-05-01 at 7.31.47 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/9/8914ee9a661b13e253acfcf9d54c8721632554d9.png)

Where can I set this? I haven’t been able to find any docs/templates to learn.

Thanks,  
Patrick

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [May 2, 2021, 3:45am UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/2 "2021-05-02T03:45:42Z")

</div>

Hola @Pat

You need to use CSS in a rich text component.

```
<span/>
<style>
#app-root div[opacity='1'] {
  color: transparent; 
}
.nav-bar-root {
  content: "";
  display: block;
  background-image:url(URL);
  background-size: 200px 40px;
  background-repeat: no-repeat; 
background-position: center, center;
;}
</style>

```

Replace URL for your picture url

Also, you can find tons of CSS codes on this [thread](https://community.glideapps.com/t/beautiful-design-app/16191)

---

<div class="post-metadata">

**Author:** ![Pat](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pat/32/25826_2.png) [@Pat](https://community.glideapps.com/u/Pat)\
**Post date:** [May 2, 2021, 3:46am UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/3 "2021-05-02T03:46:45Z")

</div>

Thanks a bunch! That thread is actually where I found the example I used 😅

Much appreciated.

---

<div class="post-metadata">

**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\
**Post date:** [May 2, 2021, 7:11am UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/4 "2021-05-02T07:11:24Z")

</div>

Only with that replacement it has to work? Because I did it but nothing happend. Or maybe the picture it has to be in google drive or cloudinary?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/5/e51a5441f0349f5c89dc6ea9a133db7c1e1df30d.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 2, 2021, 8:58am UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/5 "2021-05-02T08:58:32Z")

</div>

You can try uploading that image to something like Imgur.

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [May 2, 2021, 11:35am UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/6 "2021-05-02T11:35:25Z")

</div>

Try uploading the picture on Glide. I always do that.

It works well.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 2, 2021, 12:42pm UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/7 "2021-05-02T12:42:15Z")

</div>

I think you need to wrap the URL in quotes within the `background-image()`, no?

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 2, 2021, 12:43pm UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/8 "2021-05-02T12:43:30Z")

</div>

Also, your `span` shouldn’t have a backslash at the beginning of your code.

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [May 2, 2021, 1:09pm UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/9 "2021-05-02T13:09:24Z")

</div>

Weird!

I have it with the / and it’s working. I have it in about 5 apps the same way.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/9/792527134a3ff9311dc1a4ba7946791084eadce8.jpeg) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/8/b8458213f2153f993df4c350ec36009acecdebeb.jpeg)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 2, 2021, 1:47pm UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/10 "2021-05-02T13:47:16Z")

</div>

Hm 🤔

---

<div class="post-metadata">

**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\
**Post date:** [May 2, 2021, 1:54pm UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/11 "2021-05-02T13:54:51Z")

</div>

@Robert_Petitto @SantiagoPerez Works because the backslash at the END of the word it’s becuase then you don’t need to add a , it means that ALL the text that goes after that is inside span

---

<div class="post-metadata">

**Author:** ![Pat](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pat/32/25826_2.png) [@Pat](https://community.glideapps.com/u/Pat)\
**Post date:** [May 3, 2021, 2:17pm UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/12 "2021-05-03T14:17:19Z")

</div>

I am assuming underneath the hood that a Rich Text is interpreted as a single block of HTML, so the `<style></style>` tags will apply to any HTML within the Rich Text.

`</span>` is a closing tag without an opening tag, which is not valid HTML, but `<span />` is a _self closing tag_, which is valid. You can do this with some other elements such as `<img />`, `<hr />`, etc. ([see more here](https://www.techopedia.com/definition/31857/self-closing-tag#:~:text=A%20self%2Dclosing%20tag%20is,tag%20enclosed%20in%20sideways%20carets.)).

So @adriasoce , you’re logic is close but the `<style></style>` elements don’t actually go _inside_ the span, it’s just that an HTML style tag is being applied to all elements. E.g. if you had the following:

```auto
<div>
  <span class="text">Hello</span>
  <span class="text">World</span>
<div>
<style>
.text {
  color: green;
}
</style>

```

It would be applied to both span elements.

* * *

@Robert_Petitto @SantiagoPerez I am curious to hear your thoughts on using HTML in Rich Text elements though. The docs warn against it but at least for styling, it seems very common place.

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 3, 2021, 2:40pm UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/13 "2021-05-03T14:40:46Z")

</div>

Hey, I know this app 😜

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 3, 2021, 3:01pm UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/14 "2021-05-03T15:01:36Z")

</div>

Thank you for explaining that. My eye develops a twitch every time I see CSS examples or other HTML with open tags that aren’t properly closed. Browsers are notoriously forgiving of bad code and if not done properly, it could bite you later.

As for use of it…I see it as “use at your own risk” since it’s not officially supported and glide could easily make a change that would cause a lot of it to not work in the future. If people are OK with that risk, then I personally have no problem with it. Just have a back-up plan if it no longer works in the future. For the most part, I only use it sparingly for some minor UI tweaks. At most, I build dynamic HTML Tables, because Markdown just isn’t capable of what I need and Glide doesn’t have a robust table feature.

---

<div class="post-metadata">

**Author:** ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)\
**Post date:** [May 3, 2021, 6:30pm UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/15 "2021-05-03T18:30:06Z")

</div>

Could you guys please tell me, how can I replace the heading of the tab with another text, not an image, using this method? Im just trying to make dynamic header, which will say smth like “Hello, {username}”. It would be nice if some of you share a necessary piece of code for different app themes (like Bold, Light and Pure), cuz it seems that i need different codes for different themes. Thank you!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 3, 2021, 11:26pm UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/16 "2021-05-03T23:26:03Z")

</div>

From my understanding, you can’t directly replace the tab name with a dynamic field. You can use a service like Cloudinary to generate a dynamic image based on a template URL, with the username as the input.

For app themes, I don’t think that’s possible. You can’t set visibility conditions based on app themes (for different pieces of code), and conditional CSS is something I haven’t seen people done on Glide.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 3, 2021, 11:45pm UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/17 "2021-05-03T23:45:55Z")

</div>

you can see it in action here:

> **[Code BOOK](https://code-book.glideapp.io/dl/ewAiAHQAIgA6ADIALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AYwBvAGQAZQBzACIALAAiAHIAIgA6ACIATABQADYAUwBZAC0ANwBkAFMAYgBxADEASwBkAGcASwBjAFIAQgBaAEIAZwAiACwAIgBuACIAOgAiAEMAUwBTACAAYwBvAGQAZQAiAH0A)**
>
> share cool codes, scripts and links

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 4, 2021, 2:21am UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/18 "2021-05-04T02:21:43Z")

</div>

you can use template column to change CSS… it will become conditional

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 4, 2021, 2:49am UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/19 "2021-05-04T02:49:37Z")

</div>

Can you explain more on the use cases for conditional CSS you have used? Or is it just dynamic input?

Personally I meant more about the things like show the image space in a card if there’s an image, and don’t use that space at all if there’s none; or theme-related like what @11183 mentioned.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 4, 2021, 2:52am UTC](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285/20 "2021-05-04T02:52:14Z")

</div>

you can use CSS for so many purposes, CSS parameters you can adjust dynamically using a template column

[Next page](https://community.glideapps.com/t/how-to-add-an-icon-text-inline-with-the-sidebar-menu/26285.md?page=2)