# Is it possible to add hero icons with to css in a rich text element

**URL:** https://community.glideapps.com/t/is-it-possible-to-add-hero-icons-with-to-css-in-a-rich-text-element/53949
**Category:** Ask for Help
**Created:** [November 11, 2022, 10:47pm UTC](https://community.glideapps.com/t/is-it-possible-to-add-hero-icons-with-to-css-in-a-rich-text-element/53949 "2022-11-11T22:47:37Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)
#### Post date: [November 11, 2022, 10:47pm UTC](https://community.glideapps.com/t/is-it-possible-to-add-hero-icons-with-to-css-in-a-rich-text-element/53949/1 "2022-11-11T22:47:37Z")

</div>

I’ve been playing around with [“Progress bar batch css” over here](https://www.notion.so/glidecommunity/Glide-Community-Resources-8f4cef535db147db83f49f088a47407e?p=ed2ed2fa71fe4ecba490b7d0d5ebb119&pm=s).

 ![Screenshot 2022-11-11 at 22.39.21](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/c/ac188920beef95ccbaf2e323aebb7c6fb9d5ce2f.png)

I’m still adjusting the design but I would really like to get a hero icon into my design.  
To replace the 🔎 icon.

I have the following css in a template column

```auto
<div class="progress-card">
    <div class="progress-card-badge"></div>
    <div class="progress-card-data">
<!------------------------------- ↓Text data to replace↓ --->
        <div class="tab">
            <div class="tabText">TOTAL</div>
        </div>
        <div class="totalContainer">
            <div class="flexItem">
                <h3 class="header_totals divider">£ 3.45</h3>
                <p class="sub_header">Total</p>
            </div>
                <div class="line"></div>
            <div class="flexItem">
                <h3 class="header_totals">12h 34min</h3>
                <p class="sub_header">Total Time</p>
            </div>
        </div>
        <p class="progress-card-description">Some message</p>
        </div>
    </div>
</div>
<div class="footer-container">
    <div class="footer-item footer-icon"></div>
    <div class="footer-item footer-text">1 filter</div>  
</div>  

<style>

:root {
    --progCardBadge: url(__ICON);
    /*--progressCardBackground: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);*/
    --progressCardBackground: red;
    --progressFooterBackground: white;

}

.totalContainer{
    /*border: 1px solid red;*/
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
   
}

.flexItem {
    /*border: 1px solid blue;*/
    box-sizing: border-box;
    height: 80px;
    width: calc(50%);
    /*margin: 1em;*/
}

.header_totals {
    text-align: center;
    color: white;
    
}

.divider {
    border-right: 2px solid salmon;
}

.sub_header {
    text-align: center;
    font-size: 14px !important;
    line-height: 1.2 !important;
    opacity: .4;

}

.tab {
    width: 80px;
    height: 22px;
    border-radius: 50px;
    margin-bottom: 20px;
    background-color: black;
}

.tabText {
   color: white;
   font-size: x-small;
   text-align: center;
   font-weight: 800;
   margin-top: 1px;
}

.progress-card {
    padding: 15px;
    background: var(--progressCardBackground);
    /*border-radius: 10px;*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    gap: 1px;
    align-items: center;
}

.footer-container {
    padding: 10px 15px 10px 15px;
    background: var(--progressFooterBackground);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    gap: 1px;
    align-items: center;
}

.footer-item {
    /*border: 1px solid blue;*/
    box-sizing: border-box;
    height: 20px;
}

.footer-text {
    width: 100%;
    font-size: 14px;
    color: grey;
    font-weight: 800;
    
}

.footer-icon {
    flex: none;
    width: 20px;
    height: 20px;
    background: var(--progCardBadge) center/cover;
}

.progress-card-data {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.progress-card-title {
    margin-bottom: 4px !important;
}

.progress-card-description {
    font-size: 14px !important;
    line-height: 1.2 !important;
    opacity: .4;
}

</style>

```

I’m trying to add the icon here:  
–progCardBadge: url(\_\_ICON);

where \_\_ICON is a replacement for a heroicon column.  
But it does not work. I’ve tried a few other things but still the same.

However I’m pretty new to CSS so I’m also pretty sure that I might be going around this the complete wrong way.

---

<div class="post-metadata">

### Author: ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [November 11, 2022, 10:51pm UTC](https://community.glideapps.com/t/is-it-possible-to-add-hero-icons-with-to-css-in-a-rich-text-element/53949/2 "2022-11-11T22:51:09Z")

</div>

Just add a hero icon in a column, then use Single Value and direct it to that icon. Then use the Single Value to replace the \_\_ICON in a Temp column. Ive had them work in my HTML Rich Text

Cant tell you if youre CSS is correct, but the above will get you your hero icon in the \_\_ICON

---

<div class="post-metadata">

### Author: ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)
#### Post date: [November 11, 2022, 10:59pm UTC](https://community.glideapps.com/t/is-it-possible-to-add-hero-icons-with-to-css-in-a-rich-text-element/53949/3 "2022-11-11T22:59:22Z")

</div>

I don’t understand why I need the single value column. I tried it but still nothing showing.

I have the following setup

 ![Screenshot 2022-11-11 at 22.57.14](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/1/5180cf50dcdc2c0163f782d9edd041fca2910c7c.jpeg)

I’m fairly sure It’s me who don’t know how to add the icon to the CSS despite trying google and stack overflow

---

<div class="post-metadata">

### Author: ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [November 11, 2022, 11:06pm UTC](https://community.glideapps.com/t/is-it-possible-to-add-hero-icons-with-to-css-in-a-rich-text-element/53949/6 "2022-11-11T23:06:53Z")

</div>

Try

`<pre><span><style>`

instead of just `<style>`

---

<div class="post-metadata">

### Author: ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)
#### Post date: [November 11, 2022, 11:52pm UTC](https://community.glideapps.com/t/is-it-possible-to-add-hero-icons-with-to-css-in-a-rich-text-element/53949/7 "2022-11-11T23:52:44Z")

</div>

still the same same…

---

<div class="post-metadata">

### Author: ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)
#### Post date: [November 12, 2022, 1:39pm UTC](https://community.glideapps.com/t/is-it-possible-to-add-hero-icons-with-to-css-in-a-rich-text-element/53949/8 "2022-11-12T13:39:32Z")

</div>

Figured it out.  
It was basically me who didn’t know how to add an image in html.

---

<div class="post-metadata">

### Author: ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)
#### Post date: [November 13, 2022, 1:40pm UTC](https://community.glideapps.com/t/is-it-possible-to-add-hero-icons-with-to-css-in-a-rich-text-element/53949/9 "2022-11-13T13:40:09Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.