Custom callout icons

Help
1

Things I have tried

What I’m trying to do

I’m trying to create a custom callout. Here’s the CSS:

.callout[data-callout="my-comment"] {
    --callout-color: 99, 71, 214;
    --callout-icon: lucide-message-square;
   //--callout-icon: message-o;  // font-awesome
   border: 3px solid rgba(0, 0, 0, 0.5);
   border-radius: 5px;
   // box-shadow doesn't work - not sure why
   box-shadow: -20px -20px -40px rgba(255, 0, 0, .5);
}

I’m running v 1.1.12 of obsidian and latest plugins on Windows

I can’t get the icon to show. And the box-shadow doesn’t work either.

Icons seem to be a bit of a quagmire in obsidian. Knowing which icon sets (font awesome, lucide, etc) are available or how to reference them seems to be a dark art.

Does anybody have any suggestions on how to make this work?

2
  • I’m not too familiar with the icon sets myself, but lucide-message-square works over here.
  • For CSS comments, you’ll want to /* comment out like this */
    That seems to be the main issue here.
  • Not sure if box-shadow is how you want it to look, but the minus values don’t do anything for me.
.callout[data-callout="my-comment"] {
   --callout-color: 99, 71, 214;
   --callout-icon: lucide-message-square;
   /* --callout-icon: message-o; // font-awesome */
   border: 3px solid rgba(0, 0, 0, 0.5);
   border-radius: 5px;
   box-shadow: 20px 20px 40px rgba(255, 0, 0, .5);
}

1

3

I forgot that CSS doesn’t allow double-slash comments. It also appears that once the CSS parser hits an error, it doesn’t process the rest of the block. I will chock this up to mostly carbon unit failure.

Thanks for the help. It all works now.

1 Like