Obsidian 样式 - 如何自定义 Callout 图标

自定义 Callout

CSS 片段可以定义自定义标注，甚至覆盖默认配置。要定义自定义标注，请创建以下 CSS 块：

.callout[data-callout="custom-question-type"] {
    --callout-color: 0, 0, 0;
    --callout-icon: lucide-alert-circle;
}

• data-callout 属性的值是您要使用的类型标识符，例如 [!custom-question-type] 。
• --callout-color 使用数字 (0–255) 定义红色、绿色和蓝色的背景颜色。
• --callout-icon 可以是来自 lucide.dev 的图标 ID，也可以是 SVG 元素。
  • 

推荐 SVG 图标下载资源：iconfont-阿里巴巴矢量图标库

具体操作步骤如下：

1. 搜索需要图标 ICON 的提示词：
   • 
2. 选择需要的图标，在弹出的悬浮面板中点击下载按钮，只后会弹出面板：
   • 
3. 在弹出的图标面板中，可以调节图标大小和颜色，然后点击复制 SVG 代码既可
   • 

Excalidraw 的 Callout 样式

.callout[data-callout="excalidraw"] {
    --callout-color: 105, 101, 219;
    --callout-icon: '<svg t="1732181338834" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4296" width="200" height="200"><path d="M957.984 802.496a6.144 6.144 0 0 0-5.92-1.344c-46.848-69.184-106.4-134.816-164.096-198.176l-9.504-10.4a5.536 5.536 0 0 0-1.344-3.36 6.112 6.112 0 0 0-3.776-2.24l-1.92-2.016-1.344-0.992c-1.664-3.584-5.92-6.272-10.624-3.904-17.632 9.056-33.504 22.016-49.152 33.984-20.928 16-41.376 32.64-60.608 50.528a189.184 189.184 0 0 0-22.016 23.36c-3.136 4.128-0.768 8.032 3.04 9.696-13.664 13.44-27.392 27.392-41.152 41.824a6.72 6.72 0 0 0-1.792 4.928 6.304 6.304 0 0 0 2.464 4.576l24.16 18.432s0.096 0.32 0.32 0.448c34.56 34.08 95.136 81.376 159.296 131.456 9.504 7.488 19.104 14.976 28.704 22.464 4.384 5.248 8.512 10.496 12.544 15.68a6.4 6.4 0 0 0 8.928 1.216c1.44 1.088 2.88 2.336 4.352 3.456a6.4 6.4 0 0 0 8.96-1.12 6.496 6.496 0 0 0 1.216-3.456c0.448 0 0.8 0.32 1.12 0.32a6.432 6.432 0 0 0 4.704-2.016l113.792-124.288a6.272 6.272 0 0 0-0.448-8.96z m-326.72-43.04c0.768 1.024 1.568 1.92 2.336 2.816 12.992 10.944 26.848 22.784 40.928 34.88l-57.248-43.712-5.792-4.032a65.024 65.024 0 0 1-3.456-2.688l-4.256-3.584s0.768-0.768 1.12-1.216l3.904-3.936c19.2-19.424 52.192-51.84 69.184-67.712-17.984 18.112-54.4 71.2-46.592 89.184z m195.936 154.368l-47.168-36a1167.68 1167.68 0 0 0-58.56-56.224c25.472 19.68 47.264 36.32 50.528 39.232 24.704 22.048 23.584 18.016 40.576 32.544l20.448 14.848c-2.016 1.792-4.032 3.712-5.92 5.504z m11.84 9.056l-0.864-0.64c1.792-1.472 3.68-2.816 5.44-4.288l-4.448 4.928zM90.976 192.992l4.48 23.584c7.68 41.344 14.848 78.592 28.48 106.88l5.376 21.44c2.112 8.16 5.12 18.336 7.936 20.48 31.84 28.16 80.704 70.176 132.896 109.76a6.4 6.4 0 0 0 7.84-0.128c0.096 0.224 0.32 0.32 0.448 0.448a6.208 6.208 0 0 0 4.224 1.664 5.984 5.984 0 0 0 4.704-2.112c66.848-74.336 116.576-135.488 152-186.688a14.144 14.144 0 0 0 3.264-9.376c2.24-2.688 4.576-5.376 6.72-7.584a6.24 6.24 0 0 0-1.12-9.6 6.464 6.464 0 0 0-1.92-4.064 3030.912 3030.912 0 0 0-38.656-36.64 3319.488 3319.488 0 0 1-86.88-83.968L320 136.448a6.208 6.208 0 0 0-2.464-1.6c-12.416-4.352-37.888-8.704-69.952-14.304-47.2-8.032-111.776-19.2-169.92-36.544h-0.448v-0.096s-0.224 0-0.32 0.224h-0.128l0.448-0.224s-3.456 0.096-4.16 0.448a6.432 6.432 0 0 0-2.08 1.664c-0.576 0.672-1.024 1.344-5.28 2.24-4.224 0.896 0.896 0 1.248 0h-1.248v0.32c0.8 3.84 0.576 6.496 1.792 10.88-0.224 1.088 2.368 11.392 2.688 12.384l20.48 81.152z m345.92 73.088l-0.416 0.576-7.168-7.936c2.464 2.336 4.928 4.704 7.616 7.36z m-79.232 104.96l-1.12 1.344-0.224-0.224c0.448-0.32 0.896-0.768 1.44-1.088z m-45.28-224.64c3.936 3.904 19.456 18.432 23.04 22.016-16.224-7.392-56.576-26.176-75.328-32.192 18.432 3.2 43.904 7.36 52.288 10.144z m-214.4-30.976c9.408 16.096 16.8 72.544 24.16 127.424-4.16-17.664-7.68-34.88-11.072-51.424-5.792-28.608-11.168-54.208-18.656-76.896 1.568 0.096 3.456 0.32 5.472 0.544 0 0.128 0 0.224 0.224 0.32z m-3.2-13.536c-2.592-0.224-4.928-0.448-6.944-0.544-0.224-0.448-0.32-0.896-0.448-1.344l7.36 2.016z m-24.832 5.024v-0.224z m877.888-13.184c0.448-2.56-12.288-13.856-8.288-14.08 9.504-0.448 9.6-15.072 0-14.656-12.608 0.672-25.376 3.584-37.664 5.952-22.112 4.128-44.16 8.704-66.176 13.504a2732.576 2732.576 0 0 0-146.432 34.784c-15.2 4.128-31.968 7.808-45.92 15.2-4.704 2.432-4.48 7.488-1.92 10.592a7.936 7.936 0 0 1-3.104 1.024c-4.16 0.768-8.288 1.44-12.416 2.112a6.336 6.336 0 0 0-4.352 9.6c-25.92 34.688-55.456 72-87.424 111.232a11219.52 11219.52 0 0 0-97.472 113.376c-105.184 123.616-224.448 263.776-356.576 387.2a6.336 6.336 0 0 0-0.32 8.928 5.568 5.568 0 0 0 2.112 1.44 213.888 213.888 0 0 1-5.376 4.928 5.76 5.76 0 0 0-1.792 3.584l-2.56 2.784a6.336 6.336 0 0 0 0.32 8.96 6.4 6.4 0 0 0 8.96-0.32l1.344-1.472a9.376 9.376 0 0 1 13.632 0l21.792 23.36-15.424-12.864a6.4 6.4 0 0 0-8.96 0.768 6.4 6.4 0 0 0 0.8 8.96l165.664 138.944a6.464 6.464 0 0 0 8.608-0.448l4.032-4.032a6.272 6.272 0 0 0 7.04-1.344c224.544-225.568 405.408-396.032 612.544-548.384a6.208 6.208 0 0 0 2.56-5.696 6.4 6.4 0 0 0 5.376-4.352c38.208-116.928 45.6-220.448 47.84-271.296a1.6 1.6 0 0 1 0.224-0.768c0.224-0.576 0.32-1.12 0.448-1.6l0.544-2.08a30.528 30.528 0 0 0-1.664-24.032zM546.304 276.704c10.048-11.52 20-22.784 29.856-33.76-64.384 84.736-171.04 215.296-322.016 370.432 102.816-113.76 206.432-231.68 292.16-336.64zM182.464 867.008l-0.32-0.32 2.24 0.448a5.248 5.248 0 0 0-1.92 0z m77.12 71.776l-0.544-0.448 0.32-0.32c0.224 0 0.32 0.192 0.448 0.192 0 0.224-0.224 0.32-0.32 0.576z m93.44-80.608l15.424-16.096a1.6 1.6 0 0 1 0.32 0.576c-5.216 5.12-10.496 10.4-15.84 15.52z m25.056-24.704l9.728-11.392c0.096-0.096 0.224-0.32 0.448-0.448a6444.416 6444.416 0 0 1 113.76-114.56l0.8-0.672 30.4-23.264a16625.696 16625.696 0 0 0-155.136 150.464z m241.984-624.608c-20.8 27.072-43.584 62.144-62.912 90.24-61.056 88.384-257.536 304.896-261.92 309.024-30.272 29.312-121.6 116.928-179.84 171.84a40.224 40.224 0 0 0-3.808 3.904 8.864 8.864 0 0 1 0.32-12.64c277.44-261.568 445.76-479.424 514.208-574.304-1.472 3.68-2.688 7.68-6.144 12.16z m184.544 79.36l-0.096 0.224c0-0.224-0.224-0.768 0.096-0.224z m-76 48.32c-25.28-14.656-37.12-36.576-30.304-58.688l2.144-7.36c0.896-2.144 1.92-4.288 3.136-6.4 6.592-10.944 16.64-20.672 28.16-26.368 0.544-0.224 1.12-0.32 1.664-0.448a8.896 8.896 0 0 1-0.448-4.8c0.576-3.488 2.816-6.496 7.36-6.496 7.52 0 30.752 6.912 39.584 14.528 2.688 2.112 5.248 4.48 7.616 7.04 3.36 3.904 8.256 10.272 10.72 14.88 1.472 0.64 2.56 6.912 4.256 10.144 1.568 5.152 2.24 10.4 2.016 15.68 0 0.192 0 0.192 0.096 0.32-0.32 0.768 0 4.16-0.448 4.48-1.12 8.032-4.032 16-8.384 22.912-0.448 0.544-0.768 1.216-1.216 1.792 0 0.096-0.224 0.224-0.32 0.448a49.92 49.92 0 0 1-12.096 12.608c-14.08 9.952-30.496 12.992-46.944 8.832a70.752 70.752 0 0 1-6.4-2.784z m181.856-18.24c-5.472 22.912-12.16 46.848-20.128 71.328-0.32 0.896-0.32 1.76-0.32 2.56a5.984 5.984 0 0 0-3.008 1.216 3387.712 3387.712 0 0 0-145.12 113.024 7984.064 7984.064 0 0 1 125.536-111.232 71.648 71.648 0 0 0 23.584-41.792l6.272-37.696 0.32-1.12c2.816-7.936 14.976-4.48 13.088 3.712z" fill="var(----callout-color)" p-id="4297"></path></svg>';
}

Zotero 的 Callout 样式

.callout[data-callout="zotero"] {
    --callout-color: 216, 30, 6;
    --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" width="80" height="128" viewBox="0 0 320 512"><path fill="#e11d48" d="M31.264 64h276.752v54.624L79.072 401.392h228.944V448H11.984v-53.424l229.76-283.968H31.264Z"/></svg>';
}

Bilibili 的 Callout 样式

.callout[data-callout="bilibili"] {
    --callout-color: 251, 114, 153;
    --callout-icon: '<svg t="1732185655663" class="icon" viewBox="0 0 2241 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4281" width="200" height="200"><path d="M626.875127 734.992893c-32.227411-24.430457-68.613198-41.583756-106.038579-56.657868-76.410152-30.148223-156.458883-41.063959-238.067005-38.984772-19.232487 0-38.464975 1.559391-58.217259 2.598985 0-1.559391-1.559391-3.638579-1.559391-6.237563-5.19797-58.217259-11.435533-116.434518-15.593909-173.612183-3.638579-47.82132-5.19797-95.64264-6.237563-143.463959-1.559391-92.004061-1.559391-183.488325-1.559391-275.492386 0-21.831472-1.559391-19.232487-18.192893-11.95533-51.459898 20.791878-102.4 41.063959-153.859898 60.816244C25.989848 93.563452 23.390863 98.761421 24.430457 101.360406c15.593909 58.217259 27.029442 117.993909 34.826396 177.250761 7.796954 51.459898 14.554315 101.360406 21.831472 151.780711 6.237563 44.182741 10.395939 88.365482 15.593909 133.06802 5.19797 45.222335 11.435533 90.44467 16.633503 136.186802 5.19797 43.662944 10.395939 85.766497 15.593909 129.429442 3.638579 31.187817 6.75736 61.855838 9.356345 93.043655 1.559391 24.430457 3.638579 48.860914 4.158376 72.251777 0 5.19797 1.559391 7.796954 6.75736 7.796954 11.435533 0 21.831472 1.559391 32.747208 0 53.019289-5.19797 106.038579-8.836548 158.018274-16.633503 40.024365-6.237563 79.009137-15.593909 117.474112-28.588832 54.57868-18.192893 101.360406-49.380711 146.582741-85.246701 19.232487-14.554315 34.826396-32.227411 41.583756-54.57868C660.142132 780.215228 653.904569 755.264975 626.875127 734.992893L626.875127 734.992893zM327.472081 908.085279c-7.796954-58.217259-15.593909-114.875127-23.390863-171.013198 30.148223 6.75736 156.97868 57.177665 163.216244 64.974619C421.035533 836.873096 375.293401 872.219289 327.472081 908.085279L327.472081 908.085279zM932.515736 763.061929c-2.598985-30.148223-5.19797-61.855838-8.836548-92.004061-3.638579-41.583756-7.796954-83.167513-11.435533-125.271066-3.638579-38.464975-5.19797-76.410152-7.796954-114.875127-3.638579-53.019289-7.796954-106.038579-11.435533-159.057868l-7.796954-117.474112c-1.039594-14.554315-6.75736-18.192893-21.831472-17.153299-18.192893 1.559391-35.86599 2.598985-54.058883 3.638579-15.593909 1.559391-31.187817 3.638579-46.261929 5.19797 46.781726 248.462944 67.573604 497.445685 92.004061 744.349239 28.588832 2.598985 54.57868 4.158376 81.608122 6.75736 5.19797 1.039594 7.796954 0 7.796954-5.19797l-2.598985-28.588832C939.792893 829.076142 936.154315 795.809137 932.515736 763.061929L932.515736 763.061929zM790.091371 794.249746c-3.638579-31.187817-6.75736-61.855838-10.395939-93.043655-3.638579-35.346193-6.75736-71.212183-11.435533-106.558376-2.598985-21.831472-6.237563-42.62335-9.356345-63.415228-1.039594-7.796954-6.237563-11.435533-14.554315-10.395939-14.554315 1.559391-30.148223 1.559391-45.222335 3.638579-20.791878 2.598985-41.583756 6.237563-63.415228 8.836548 25.989848 135.667005 51.979695 268.215228 79.009137 402.84264 31.187817-4.158376 60.816244-7.796954 90.964467-11.435533-1.039594-10.395939-2.598985-20.791878-3.638579-30.148223C797.888325 860.263959 793.729949 826.996954 790.091371 794.249746L790.091371 794.249746zM1100.929949 933.035533c-1.039594-51.459898-2.598985-101.360406-3.638579-152.820305-1.039594-63.415228 0-127.870051 0-191.285279 0-14.034518-1.039594-27.029442-1.559391-41.063959 0-6.237563-3.638579-11.435533-10.395939-11.435533-27.029442-1.039594-54.57868-1.559391-81.608122-1.559391-10.395939 0-19.752284 1.559391-30.148223 3.638579 1.039594 3.638579 1.039594 6.237563 1.039594 8.836548 3.638579 43.662944 7.796954 86.806091 11.435533 129.429442 3.638579 41.583756 7.796954 84.207107 11.435533 125.790863 4.158376 45.222335 7.796954 90.44467 11.95533 135.667005 0 2.598985 4.158376 6.75736 6.75736 6.75736 27.549239 1.039594 56.657868 0 85.766497 0C1100.929949 939.273096 1100.929949 935.634518 1100.929949 933.035533L1100.929949 933.035533zM750.067005 470.936041c-5.19797-49.380711-9.356345-96.162437-14.034518-143.983756-1.039594-6.237563-3.638579-9.356345-8.836548-9.356345-16.633503 0-33.786802 0-51.459898 1.039594 6.75736 53.019289 12.994924 103.959391 19.752284 156.458883C714.720812 473.535025 731.874112 473.015228 750.067005 470.936041L750.067005 470.936041zM1093.132995 478.732995 1093.132995 346.704569c0-9.356345-3.638579-11.95533-11.435533-11.95533l-45.222335 0 0 151.780711c19.752284 1.039594 38.464975 1.559391 56.657868 2.598985L1093.132995 478.732995 1093.132995 478.732995zM673.656853 477.173604l0-10.395939c-2.598985-27.029442-6.237563-53.019289-8.836548-80.048731-1.559391-17.153299-3.638579-33.786802-5.19797-51.459898-1.039594-4.158376 1.039594-10.395939-6.237563-9.356345-16.633503 1.559391-32.747208 5.19797-49.380711 6.75736 9.356345 51.459898 18.192893 101.360406 27.549239 151.780711L673.656853 477.173604 673.656853 477.173604zM1017.762437 486.010152 1017.762437 407.001015c0-20.791878-1.039594-42.62335 0-63.415228 0-7.796954-2.598985-9.356345-9.356345-9.356345l-46.261929 0c4.158376 54.058883 7.796954 104.998985 11.95533 155.419289C988.13401 488.609137 1002.168528 487.569543 1017.762437 486.010152L1017.762437 486.010152zM1017.762437 486.010152" fill="#FB7299" p-id="4282"></path><path d="M1728.84467 734.992893c-32.227411-24.430457-68.613198-41.583756-106.038579-56.657868-76.410152-30.148223-156.458883-41.063959-238.067005-38.984772-19.232487 0-38.464975 1.559391-58.217259 2.598985 0-1.559391-1.559391-3.638579-1.559391-6.237563-5.19797-58.217259-11.435533-116.434518-15.593909-173.612183-3.638579-47.82132-5.19797-95.64264-6.237563-143.463959-1.559391-92.004061-1.559391-183.488325-1.559391-275.492386 0-21.831472-1.559391-19.232487-18.192893-11.95533-51.459898 20.791878-102.4 41.063959-153.859898 60.816244-1.559391 1.039594-4.158376 6.237563-3.638579 8.836548 15.593909 58.217259 27.029442 117.993909 34.826396 177.250761 7.796954 51.459898 14.554315 101.360406 21.831472 151.780711 6.237563 44.182741 10.395939 88.365482 15.593909 133.06802 5.19797 45.222335 11.435533 90.44467 16.633503 136.186802 5.19797 43.662944 10.395939 85.766497 15.593909 129.429442 3.638579 31.187817 6.75736 61.855838 9.356345 93.043655 1.559391 24.430457 3.638579 48.860914 4.158376 72.251777 0 5.19797 1.559391 7.796954 6.75736 7.796954 11.435533 0 21.831472 1.559391 32.747208 0 53.019289-5.19797 106.038579-8.836548 158.018274-16.633503 40.024365-6.237563 79.009137-15.593909 117.474112-28.588832 54.57868-18.192893 101.360406-49.380711 146.582741-85.246701 19.232487-14.554315 34.826396-32.227411 41.583756-54.57868C1762.111675 780.215228 1755.874112 755.264975 1728.84467 734.992893L1728.84467 734.992893zM1429.441624 908.085279c-7.796954-58.217259-15.593909-114.875127-23.390863-171.013198 30.148223 6.75736 156.97868 57.177665 163.216244 64.974619C1523.005076 836.873096 1477.262944 872.219289 1429.441624 908.085279L1429.441624 908.085279zM2034.485279 763.061929c-2.598985-30.148223-5.19797-61.855838-8.836548-92.004061-3.638579-41.583756-7.796954-83.167513-11.435533-125.271066-3.638579-38.464975-5.19797-76.410152-7.796954-114.875127-3.638579-53.019289-7.796954-106.038579-11.435533-159.057868l-7.796954-117.474112c-1.039594-14.554315-6.75736-18.192893-21.831472-17.153299-18.192893 1.559391-35.86599 2.598985-54.058883 3.638579-15.593909 1.559391-31.187817 3.638579-46.261929 5.19797 46.781726 248.462944 67.573604 497.445685 92.004061 744.349239 28.588832 2.598985 54.57868 4.158376 81.608122 6.75736 5.19797 1.039594 7.796954 0 7.796954-5.19797l-2.598985-28.588832C2041.762437 829.076142 2038.123858 795.809137 2034.485279 763.061929L2034.485279 763.061929zM1892.060914 794.249746c-3.638579-31.187817-6.75736-61.855838-10.395939-93.043655-3.638579-35.346193-6.75736-71.212183-11.435533-106.558376-2.598985-21.831472-6.237563-42.62335-9.356345-63.415228-1.039594-7.796954-6.237563-11.435533-14.554315-10.395939-14.554315 1.559391-30.148223 1.559391-45.222335 3.638579-20.791878 2.598985-41.583756 6.237563-63.415228 8.836548 25.989848 135.667005 51.979695 268.215228 79.009137 402.84264 31.187817-4.158376 60.816244-7.796954 90.964467-11.435533-1.039594-10.395939-2.598985-20.791878-3.638579-30.148223C1899.857868 860.263959 1895.699492 826.996954 1892.060914 794.249746L1892.060914 794.249746zM2202.899492 933.035533c-1.039594-51.459898-2.598985-101.360406-3.638579-152.820305-1.039594-63.415228 0-127.870051 0-191.285279 0-14.034518-1.039594-27.029442-1.559391-41.063959 0-6.237563-3.638579-11.435533-10.395939-11.435533-27.029442-1.039594-54.57868-1.559391-81.608122-1.559391-10.395939 0-19.752284 1.559391-30.148223 3.638579 1.039594 3.638579 1.039594 6.237563 1.039594 8.836548 3.638579 43.662944 7.796954 86.806091 11.435533 129.429442 3.638579 41.583756 7.796954 84.207107 11.435533 125.790863 4.158376 45.222335 7.796954 90.44467 11.95533 135.667005 0 2.598985 4.158376 6.75736 6.75736 6.75736 27.549239 1.039594 56.657868 0 85.766497 0C2202.899492 939.273096 2202.899492 935.634518 2202.899492 933.035533L2202.899492 933.035533zM1852.036548 470.936041c-5.19797-49.380711-9.356345-96.162437-14.034518-143.983756-1.039594-6.237563-3.638579-9.356345-8.836548-9.356345-16.633503 0-33.786802 0-51.459898 1.039594 6.75736 53.019289 12.994924 103.959391 19.752284 156.458883C1816.690355 473.535025 1833.843655 473.015228 1852.036548 470.936041L1852.036548 470.936041zM2195.102538 478.732995 2195.102538 346.704569c0-9.356345-3.638579-11.95533-11.435533-11.95533l-45.222335 0 0 151.780711c19.752284 1.039594 38.464975 1.559391 56.657868 2.598985L2195.102538 478.732995 2195.102538 478.732995zM1775.626396 477.173604l0-10.395939c-2.598985-27.029442-6.237563-53.019289-8.836548-80.048731-1.559391-17.153299-3.638579-33.786802-5.19797-51.459898-1.039594-4.158376 1.039594-10.395939-6.237563-9.356345-16.633503 1.559391-32.747208 5.19797-49.380711 6.75736 9.356345 51.459898 18.192893 101.360406 27.549239 151.780711L1775.626396 477.173604 1775.626396 477.173604zM2119.73198 486.010152 2119.73198 407.001015c0-20.791878-1.039594-42.62335 0-63.415228 0-7.796954-2.598985-9.356345-9.356345-9.356345l-46.261929 0c4.158376 54.058883 7.796954 104.998985 11.95533 155.419289C2090.103553 488.609137 2104.138071 487.569543 2119.73198 486.010152L2119.73198 486.010152zM2119.73198 486.010152" fill="#FB7299" p-id="4283"></path></svg>'
}

参考文档

• Callouts - Obsidian Help

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。