CSS Trick: Change Favorite Heart to Bookmark

Community Resources
1 

<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");
}
21 Likes
2

Here’s the d: path for a star:

<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

6 Likes
3

Replicate styling to Tiles:

Screen Shot 2020-11-04 at 12.16.42 PM

<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");
}
8 Likes
4

I want a red irregularly shaped circle. GO!

4 Likes
5

:rofl:

Screen Shot 2020-11-04 at 1.49.08 PM

<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

13 Likes
6

:rofl: :rofl:

2 Likes
7

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

3 Likes
8

I also make balloon animals :clown_face:

9 Likes
9

image

3 Likes
10

How the hell did you do this :joy::joy::joy:

1 Like
11

I may use that just cuz it’s cool.

4 Likes
12

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

For example: Like, save, react.

13

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.

14

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

15

Not sure. Probably in a couple weeks.

1 Like
16

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

5 Likes
17

The first one is how I built these :wink:
The second would have been a LOT quicker :sweat_smile:

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

1 Like
18

Well… that might explain why I was struggling to get any of them working in Glide! :rofl::joy:

19

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
Screen Shot 2020-11-05 at 8.06.04 PM558×1086 61.7 KB

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.

1 Like
20

But does it get filled in when clicked?

1 Like