Custom Callout

#blog #obsidian

참고 자료

Obsidian Documentation - Callouts#Customize-callouts
How to customize Obsidian Callouts with your very own SVG icon created in Excalidraw

1. lucide.dev 에 원하는 Icon 이 있는 경우¶

.callout[data-callout="tweet"] {
    --callout-color: 26, 140, 216;
    --callout-icon: lucide-twitter;
}

tweet ~

2. fontawesome.com 등 에서 원하는 Icon 의 Svg 찾기¶

hi

Question

Q icon

Answer

A icon

.callout[data-callout="q"] {
    --callout-color: 94, 43, 224;
    --callout-icon: 'copy svg from fontawesome.com';
}

.callout[data-callout="answer"] {
    --callout-color: 231, 225, 247;
    --callout-icon: 'copy svg from fontawesome.com';
}

3. Custom Svg with Excalidraw¶

좀 많이 귀찮다... 영상을 참고하자

[!q-bubble] my bubble!

Last update: February 27, 2023
Created: February 27, 2023