I know you can can change callout colors and even title text color using CSS, but is there a way to change the icon color as well? My current CSS snippet is
.callout[data-callout="source"] {
--callout-icon: bookmark-minus;
--callout-color: 129, 222, 186;
--callout-title-color: #e0bb79;
}
Thanks!
You could try adding in the second & .callout-icon .svg-icon
section. That takes care if it on my end.
.callout[data-callout="source"] {
--callout-icon: bookmark-minus;
--callout-color: 129, 222, 186;
--callout-title-color: #e0bb79;
& .callout-icon .svg-icon {
color: salmon;
}
}
The non-nested version if it’s clearer:
.callout[data-callout="source"] {
--callout-icon: bookmark-minus;
--callout-color: 129, 222, 186;
--callout-title-color: #e0bb79;
}
.callout[data-callout="source"] .callout-icon .svg-icon {
color: salmon;
}
Perfect. Thank you kindly!
system
Closed
January 21, 2025, 10:58pm
4
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.