You change the Life Ring Button icon via the Custom CSS section. We strongly recommend using SVG format for icons. Otherwise, icons may appear blurry on certain devices.
.productfruits--lifering-ico {
--img: url(INSERT THE FULL URL HERE);
-webkit-mask-image: var(--img) !important;
mask-image: var(--img) !important;
}
Notes
.productfruits--lifering {
height: 40px !important;
width: 40px !important;
}
Notes
font-size
CSS property.The first option is to use the settings in the Life Ring Button Design tab. This will offset the position by the X or Y axis.
The second option is to use Custom CSS. In this case, do not use the Design position fields shown above.
.productfruits--lifering {
right: 200px;
bottom: 200px;
}
This option allow you to unset the right and bottom CSS properties first and then set the position.
.productfruits--lifering {
right: unset;
bottom: unset;
top: 200px;
left: 200px;
}
This will get rid of the secondary image of a lifesaver.
.productfruits--lifering-modal-title::before {
visibility: hidden !important;
}
If your Life Ring Button is enabled to be moved by users manually on the screen, you might want to adjust the design of the drag handle which is displayed on mouse hover. Use the following snippet:
/* For the handle container */
.pf-life-ring-launcher-move {
backgroud-color: red;
}
/* For the handle icon */
.pf-life-ring-launcher-move::after {
background-image: url(.....)
}