CSS Trick: Change Favorite Heart to Bookmark

Community Resources
21

Some of THESE work!

Screen Shot 2020-11-05 at 8.36.00 AM

2 Likes
22

yep!

Screen Shot 2020-11-05 at 9.38.32 PM

1 Like
23

Weird…it doesn’t let me click/fill the icon.

24

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…

25

Semi-square!

[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

2 Likes
26

Screenshot?

27

This is the semisquare not filled in
image
And this is it filled in
image

Isn’t it :sparkles: Beautiful :sparkles:

5 Likes
28

So beautiful.

1 Like
30

@Robert_Petitto,

Any tricks to turn a boolean into a thumb up? by chance?

31

Screen Shot 2021-01-07 at 9.11.15 PM
Screen Shot 2021-01-07 at 9.11.15 PM1246×928 51.7 KB

:laughing:

1 Like
32

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.

33

hmm… Reaction component?

4 Likes
34

Great idea! Thanks!

Edit: Thanks @Darren_Murphy That worked.

1 Like
35

You just reminded me that I have never used the reaction component since it went to production…

2 Likes
36

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 :grin:

3 Likes
37

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.

1 Like
38

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.

39

But you want it to be user specific, right? Then you kind of need users to sign in, or at least have profiles enabled

40

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. :man_facepalming:t6:

41

Anybody here has done this with ratings component? I can’t seem to find a way to touch the SVG. Thanks in advance!