# CSS Trick: Change Favorite Heart to Bookmark **URL:** \ **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:** 2
**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:36pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/21 "2020-11-05T13:36:13Z")
Some of THESE work! > **[Find, customize & generate common SVG icons for your project](https://iconsvg.xyz/)** > > Simple tool to find, customize and generate common SVG icons for your project ![Screen Shot 2020-11-05 at 8.36.00 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/c/ec316b07e2b4d3c2410a89018fa8cbd342da531d.png) ---
**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, 1:39pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/22 "2020-11-05T13:39:16Z")
> [@Robert\_Petitto](#): > > But does it get filled in when clicked? yep! ![Screen Shot 2020-11-05 at 9.38.32 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/d/fd5efc41ebce7ed695b4c3c05bd15ec4716adafd.png) ---
**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:42pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/23 "2020-11-05T13:42:42Z")
Weird…it doesn’t let me click/fill the icon. ---
**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, 2:00pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/24 "2020-11-05T14:00:23Z")
mmm, seems it works with some, but not others. I’m in way over my head here, so I won’t try to explain why… ---
**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\ **Post date:** [December 3, 2020, 7:11pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/25 "2020-12-03T19:11:15Z")
## Semi-square! ```auto [data-test="app-switch-view"] :nth-child(2) :nth-child(1) :nth-child(1) { stroke: black; box-shadow: 1px 1px 45px 3px rgba(136,136,136,1); d: path("m 16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"); } ``` This was totally and completely random but I’m proud of myself for doing it ---
**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:** [December 3, 2020, 7:21pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/26 "2020-12-03T19:21:13Z")
Screenshot? ---
**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\ **Post date:** [December 3, 2020, 7:24pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/27 "2020-12-03T19:24:59Z")
This is the semisquare not filled in ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/5/5556f1480ccc183e948155ab071c36a815064a33.png) And this is it filled in ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/77aca490932bd5d014ea0d7a75e1afb99fb6a96c.png) # Isn’t it ✨ Beautiful ✨ ---
**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:** [December 3, 2020, 7:27pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/28 "2020-12-03T19:27:20Z")
So beautiful. ---
**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:** [January 7, 2021, 1:04pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/30 "2021-01-07T13:04:35Z")
@Robert_Petitto, Any tricks to turn a boolean into a thumb up? by chance? ---
**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:** [January 7, 2021, 1:12pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/31 "2021-01-07T13:12:04Z")
![Screen Shot 2021-01-07 at 9.11.15 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/e/0e4c6a4016cb761c7be5e58e3b0e238a8775cbc5.png) 😆 ---
**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:** [January 7, 2021, 1:17pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/32 "2021-01-07T13:17:51Z")
That’s a good one. Thing is I am creating a Favorite session but I don’t wanna use the native favorite because it requires users to sign in. The other option I thought is the boolean but I’d like to have the thumb up in place of the boolean. The ITE still shows the boolean. ---
**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:** [January 7, 2021, 1:24pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/33 "2021-01-07T13:24:06Z")
hmm… Reaction component? > **[Reaction](https://docs.glideapps.com/all/reference/components/pickers/reaction)** ---
**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:** [January 7, 2021, 1:45pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/34 "2021-01-07T13:45:48Z")
Great idea! Thanks! Edit: Thanks @Darren_Murphy That worked. ---
**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:** [January 7, 2021, 4:17pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/35 "2021-01-07T16:17:18Z")
You just reminded me that I have never used the reaction component since it went to production… ---
**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:** [January 7, 2021, 4:25pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/36 "2021-01-07T16:25:30Z")
Every now and then I go looking in the docs for sections I haven’t read yet, or don’t have a decent understanding of. It was on one of those little trips that I recently learned about it. Now I’m looking for an excuse to use it 😁 ---
**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:** [January 7, 2021, 5:47pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/37 "2021-01-07T17:47:27Z")
I’ve used it only once, and then had to no longer use it because it doesn’t contain all Emojis…Client needed specific ones. ---
**Author:** ![Lisa](https://avatars.discourse-cdn.com/v4/letter/l/f08c70/32.png) [@Lisa](https://community.glideapps.com/u/Lisa)\ **Post date:** [January 8, 2021, 3:57pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/38 "2021-01-08T15:57:24Z")
This is great trick, thanks @Robert_Petitto ! Have you (or anyone else on this thread) experienced this not rendering on a mobile device? The CSS works fine on desktop, but when I tested on my phone, the icon no longer showed and had a weird outline around the original favorite icon. ---
**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\ **Post date:** [January 8, 2021, 4:31pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/39 "2021-01-08T16:31:27Z")
But you want it to be user specific, right? Then you kind of need users to sign in, or at least have profiles enabled ---
**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:** [January 8, 2021, 5:07pm UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/40 "2021-01-08T17:07:56Z")
Yeah, I realized that in the end I had to use the Favorite component. I forgot that when the app is refreshed so is the user specific. 🤦🏿‍♂️ ---
**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:** [April 25, 2021, 9:52am UTC](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951/41 "2021-04-25T09:52:01Z")
Anybody here has done this with ratings component? I can’t seem to find a way to touch the SVG. Thanks in advance! [Previous page](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951.md?page=1) [Next page](https://community.glideapps.com/t/css-trick-change-favorite-heart-to-bookmark/17951.md?page=3)