# CSS Trick: Change Favorite Heart to Bookmark

**URL:** <https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951>\
**Category:** Community Resources\
**Created:** [November 4, 2020, 4:08pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951 "2020-11-04T16:08:38Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [November 4, 2020, 4:08pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/1 "2020-11-04T16:08:38Z")

</div>

```auto
<pre><span><style>
[data-test="app-switch-view"] :nth-child(2) :nth-child(1) :nth-child(1) {
stroke: white;
box-shadow: 1px 1px 45px 3px rgba(136,136,136,1);
d: path("m 1 1 l 16 0 l 0 18 l -8 -6 l -8 6 l 0 -18");
}

```

---

<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:** [November 4, 2020, 4:45pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/2 "2020-11-04T16:45:15Z")

</div>

Here’s the `d: path` for a star:

```auto
<pre><span><style>
[data-test="app-switch-view"] :nth-child(2) :nth-child(1) :nth-child(1) {
stroke: white;
box-shadow: 1px 1px 45px 3px rgba(136,136,136,1);
d: path("m 12 0 l 3 7 l 7 1 l -5 5 l 2 7 l -7 -4 l -7 4 l 2 -7 l -5 -5 l 7 -1 l 3 -7");
}

```

![Screen Shot 2020-11-04 at 11.45.07 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/f/efa0ff94c4a3ab0612f42f90b3dec115bd2d090b.png)

---

<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:** [November 4, 2020, 5:17pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/3 "2020-11-04T17:17:15Z")

</div>

### Replicate styling to Tiles:

![Screen Shot 2020-11-04 at 12.16.42 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/5/d58d359b46a0affbfc8abe84956b419c519298c6.png)

```auto
<pre><span><style>
[data-test="app-toggle-icon-overlay"] :nth-child(1) :nth-child(1) {
stroke: white;
d: path("m 1 1 l 16 0 l 0 18 l -8 -6 l -8 6 l 0 -18");
}
[data-test="app-toggle-icon-overlay"] :nth-child(1) :nth-child(2) {
stroke: white;
fill: none;
d: path("m 1 1 l 16 0 l 0 18 l -8 -6 l -8 6 l 0 -18");
}

```

---

<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:** [November 4, 2020, 6:19pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/4 "2020-11-04T18:19:56Z")

</div>

I want a red irregularly shaped circle. GO!

---

<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:** [November 4, 2020, 6:49pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/5 "2020-11-04T18:49:55Z")

</div>

# 🤣

![Screen Shot 2020-11-04 at 1.49.08 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/b/bb2267fef9075c30aa9a8f67ccb0c6b4d667038b.png)

```auto
<pre><span><style>
[data-test="app-switch-view"] :nth-child(2) :nth-child(1) :nth-child(1) {
stroke-width: 3 !important;
d: path("m 13 2 t 5 2 t 6 9 t -9 8 t -10 -3 t -1 -8 t 9 -8");
}

```

@Jeff_Hager

---

<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:** [November 4, 2020, 7:08pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/6 "2020-11-04T19:08:36Z")

</div>

🤣 🤣

---

<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:** [November 4, 2020, 7:15pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/7 "2020-11-04T19:15:32Z")

</div>

Well hot diggity! You did it! I bow down.

---

<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:** [November 4, 2020, 7:17pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/8 "2020-11-04T19:17:02Z")

</div>

I also make balloon animals 🤡

---

<div class="post-metadata">

**Author:** ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)\
**Post date:** [November 4, 2020, 9:17pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/9 "2020-11-04T21:17:48Z")

</div>

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

---

<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:** [November 4, 2020, 10:11pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/10 "2020-11-04T22:11:54Z")

</div>

How the hell did you do this 😂😂😂

---

<div class="post-metadata">

**Author:** ![Tim\_Sullivan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tim_sullivan/32/3461_2.png) [@Tim\_Sullivan](https://community.glideapps.com/u/Tim_Sullivan)\
**Post date:** [November 4, 2020, 10:17pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/11 "2020-11-04T22:17:35Z")

</div>

I may use that just cuz it’s cool.

---

<div class="post-metadata">

**Author:** ![PanaYoung](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/panayoung/32/25830_2.png) [@PanaYoung](https://community.glideapps.com/u/PanaYoung)\
**Post date:** [November 4, 2020, 10:47pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/12 "2020-11-04T22:47:41Z")

</div>

Hello @Robert_Petitto! I wonder if you can make a line of icons that do different actions.

For example: Like, save, react.

---

<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:** [November 4, 2020, 11:26pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/13 "2020-11-04T23:26:16Z")

</div>

This is somewhat achievable on the details page. Especially with the new compound actions. Can create an inline list with different actions based on condition.

---

<div class="post-metadata">

**Author:** ![PanaYoung](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/panayoung/32/25830_2.png) [@PanaYoung](https://community.glideapps.com/u/PanaYoung)\
**Post date:** [November 5, 2020, 12:41am UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/14 "2020-11-05T00:41:04Z")

</div>

Thank you. By the way, when do you officially add compound stocks?

---

<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:** [November 5, 2020, 12:58am UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/15 "2020-11-05T00:58:32Z")

</div>

Not sure. Probably in a couple weeks.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [November 5, 2020, 3:04am UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/16 "2020-11-05T03:04:12Z")

</div>

Was poking around a bit last night after I saw this and found a couple of potentially useful links:

- [SVG Path builder](https://mavo.io/demos/svgpath/)
- [SVG Icon Library (free)](http://svgicons.sparkk.fr/)

---

<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:** [November 5, 2020, 3:13am UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/17 "2020-11-05T03:13:47Z")

</div>

The first one is how I built these 😉  
The second would have been a LOT quicker 😅

EDIT: The second link doesn’t seem to provide compatible paths.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [November 5, 2020, 11:42am UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/18 "2020-11-05T11:42:33Z")

</div>

> [@Robert\_Petitto](#):
>
> EDIT: The second link doesn’t seem to provide compatible paths.

Well… that might explain why I was struggling to get any of them working in Glide! 🤣😂

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [November 5, 2020, 12:10pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/19 "2020-11-05T12:10:40Z")

</div>

> [@Robert\_Petitto](#):
>
> EDIT: The second link doesn’t seem to provide compatible paths.

Actually @Robert_Petitto, I just had another go at this and got it working.

Twitter symbol:

 ![Screen Shot 2020-11-05 at 8.06.04 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/0/80d86a4ba0d1ad44dfa8c2d31ce10e652f706550.jpeg)

And the CSS:

```
<pre><span><style>
[data-test="app-switch-view"] :nth-child(2) :nth-child(1) :nth-child(1) {
stroke-width: 3 !important;
d: path("M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266");
}

```

Trick is just to use everything that’s included in the quotes, and ignore the rest.

---

<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:** [November 5, 2020, 1:05pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/20 "2020-11-05T13:05:37Z")

</div>

But does it get filled in when clicked?

[Next page](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951.md?page=2)