obsidian-custom-icon.css

/* custom-icon.css */
/* author: https://rokcso.com */
/* post: https://rokcso.com/p/obsidian-custom-icon */
/* source: https://gist.github.com/rokcso/0ee5562c9aaf2bf1b653ab85cc907190 */


/* --- 文件夹配置开始 --- */
/* 全局自定义所有文件夹的默认 icon，所有没有明确指定 icon 的文件夹都将使用这个 icon */
.nav-folder .nav-folder-title-content::before {
    content: "📦 ";
}

/* 自定义指定文件夹的 icon，data-path 的值应为文件夹路径 */
/* 根目录一级文件夹，data-path 就是文件夹名 */
div[data-path="Blog"] .nav-folder-title-content::before
{
  content: "📰 ";
}
div[data-path="@Ing"] .nav-folder-title-content::before
{
  content: "👋 ";
}
div[data-path="AppleDev"] .nav-folder-title-content::before
{
  content: "🍏 ";
}
/* 非根目录一级文件夹，data-path 需要包含其所有父级文件夹名 */
div[data-path="AppleDev/Swift"] .nav-folder-title-content::before
{
  content: "🐦 ";
}
div[data-path="Design"] .nav-folder-title-content::before
{
  content: "🎨 ";
}
div[data-path="Bebe"] .nav-folder-title-content::before
{
  content: "🥳 ";
}
div[data-path="NoBiz"] .nav-folder-title-content::before
{
  content: "🥷 ";
}
div[data-path="PM"] .nav-folder-title-content::before
{
  content: "⭐ ";
}
div[data-path="Sideline"] .nav-folder-title-content::before
{
  content: "🪴 ";
}
div[data-path="Developer"] .nav-folder-title-content::before
{
  content: "🛠️ ";
}
div[data-path="Snippets"] .nav-folder-title-content::before
{
  content: "🧩 ";
}

/* 使用 $= 选择以 xxx 结尾的 data-path，这种方式不用考虑文件夹的父级文件夹名 */
/* 所有名为 Assets 的文件夹，不管在哪个父级文件夹下，都能使用 🎒 作为 icon */
div[data-path$="Assets"] .nav-folder-title-content::before
{
  content: "🎒 ";
}

div[data-path^="Snippets"] .nav-folder-title-content::before {
  content: "🧩 ";
}
/* --- 文件夹配置结束 --- */


/* --- 文件配置开始 --- */
/* 全局自定义所有文件的默认 icon，所有没有明确指定 icon 的文件都将使用这个 icon */
.nav-file-title-content::before {
    content: "📝 ";
}

/* 文件的 data-path 由文件所在的所有父级文件夹以及文件名共同组成，比如 Blog/Archive/年终总结.md */
/* 使用 ^= 选择以 xxx 开头的 data-path，可以实现选中指定文件夹下的所有文件 */
/* 所有 Blog 文件夹下的文件，都能使用 🌐 作为 icon */
div[data-path^="Blog"] .nav-file-title-content::before {
  content: "🌐 ";
}
div[data-path^="NoBiz"] .nav-file-title-content::before {
  content: "💩 ";
}
div[data-path^="NoBiz/Resume"] .nav-file-title-content::before {
  content: "🌟 ";
}
div[data-path^="Snippets"] .nav-file-title-content::before {
  content: "🧩 ";
}

/* 使用 $= 选择以 xxx 指定文件格式结尾的 data-path，注意同一文件格式的大小写兼容 */
/* 所有 .png 格式的图片，都能使用 🖼️ 作为 icon */
div[data-path$=".png"] .nav-file-title-content::before
{
  content: "🖼️ ";
}
div[data-path$=".PNG"] .nav-file-title-content::before
{
  content: "🖼️ ";
}

/* 指定某一个具体的文件的 icon，注意：文件的 data-path 中的文件名是包含文件格式的 */
/* Coffee.md 是根目录下的文件，所以 data-path 中没有父级文件夹名 */
div[data-path="Coffee.md"] .nav-file-title-content::before
{
  content: "☕ ";
}
/* --- 文件配置结束 --- */

如何在 Obsidian 中确定文件或者文件名的 data-path？使用快捷键 option + command + I 即可打开开发者工具：