声明：本文大部分内容来自于https://www.bilibili.com/read/cv/

方法一：Obsidian Icon Folder插件

Github：https://github.com/FlorianWoelki/obsidian-icon-folder
使用方法Github写的很详细了，可以看Github。但是这个插件我觉得不太方便的一点是：每次创建一个新的文件夹，就得手动设置一遍icon，我感觉太麻烦了。我希望的效果是：

每次创建了文件夹、文件、或者是一些特定文件比如图片、pdf等，文件名旁边自动添加上我预设的图标。

所以我就采取了原文中的方法二。

方法二：CSS Snippets

提示：要使用这个方法，你最好要懂一点CSS哦，不然可能不知所以然的话出现了bug比较难定位。

首先上效果图：

讯享网

CSS Snippets

Obsidian它本身是把Web做成了app的形式，所以你按ctrl+shift+i快捷键的时候，会看到经常在网页中看到的开发者工具。
那既然是Web的话，就可以用css样式修改某个html元素的样式。Obsidian提供了一个叫CSS Snippets（中文叫“CSS代码片段”）的功能。

点击上图所示的文件夹图标，就可以打开一个文件夹，这里面可以存放若干个自定义的css文件，如下图：

创建好的文件会同步到obsidian中，点击switch按钮即可使这个css文件生效。

CSS修改图标

这里主要总结一种从原文中学习到的方法：通过给伪元素::before设置svg的css代码来设置图标的方式，如下图：

所以我们的目标是：通过一个svg文件，得到这样一串css代码，然后复制到伪元素::before的content属性中即可。根据原文内容，总结步骤如下：

修改svg图标样式：

1. 准备好要用的svg图标，图标可以在如https://remixicon.com/的网站上找
2. 下载软件inkscape，https://inkscape.org/
3. 将svg文件导入到inkscape中
4. 在软件中，修改大小、颜色等等，调整成自己喜欢的样式。我自己主要调了这么几个参数：
   • 文档的宽高16×16（文档属性可以通过ctrl+shift+d打开）
   • 图标的宽高12×12
   • 图标的颜色
5. 导出为svg文件

将svg标签转换为css代码：

6. 在导出的文件中，复制<svg></svg>部分，用这个网站将svg标签转换成css代码
7. 将转换好的的css代码复制下来粘贴即可

最后附上我自己的css文件。文件名：custom-icons-differing-files-and-folders.css，文件内容：

/* 文件图标 */ .nav-folder-children .nav-file-title-content:first-child::before { 
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16' height='16' version='1.1' id='svg16' sodipodi:docname='file-text-line.svg' inkscape:version='1.2.1 (9c6d41e410, 2022-07-14)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs20' /%3E%3Csodipodi:namedview id='namedview18' pagecolor='%23ffffff' bordercolor='%' borderopacity='0.25' inkscape:showpageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' inkscape:deskcolor='%23d1d1d1' showgrid='false' inkscape:zoom='9.' inkscape:cx='-9.' inkscape:cy='12.' inkscape:window-width='1600' inkscape:window-height='978' inkscape:window-x='-6' inkscape:window-y='-6' inkscape:window-maximized='1' inkscape:current-layer='svg16' /%3E%3Cpath fill='none' d='M 0,0 H 24 V 24 H 0 Z' id='path12' /%3E%3Cpath d='m 13.,7. v 7.7958 a 0.,0. 0 0 1 -0.,0.6042 H 3. a 0.,0. 0 0 1 -0.,-0.5952 V 4. c 0,-0.3222 0.,-0.5952 0.,-0.5952 H 9. Z M 12.,8. H 9. V 5. H 4. V 14. H 12. Z M 6.0,6. H 7. V 8. H 6.0 Z m 0,2. H 10. V 10. H 6.0 Z m 0,2. h 4. v 1. H 6.0 Z' id='path14' style='fill:%23b2b2b2;stroke-width:0.57735;fill-opacity:1' inkscape:transform-center-x='0.' inkscape:transform-center-y='-0.' /%3E%3C/svg%3E%0A"); margin: 0 5px 0 0; padding: 0 0 0 2px; } /*文件夹图标 */ .nav-folder-children .nav-folder-title-content::before { 
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' version='1.1' id='svg8' sodipodi:docname='dark-folder-01.svg' width='16' height='16' inkscape:version='1.2.1 (9c6d41e410, 2022-07-14)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs12' /%3E%3Csodipodi:namedview id='namedview10' pagecolor='%23ffffff' bordercolor='%' borderopacity='1.0' inkscape:showpageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' inkscape:deskcolor='%23d1d1d1' showgrid='false' inkscape:zoom='9.' inkscape:cx='2.' inkscape:cy='12.050847' inkscape:window-width='1600' inkscape:window-height='978' inkscape:window-x='-6' inkscape:window-y='-6' inkscape:window-maximized='1' inkscape:current-layer='svg8' /%3E%3Cpath d='M 8.2691,5.6 H 13.85 c 0.,0 0.65,0. 0.65,0. V 15. C 14.,15. 14.,16 13.85,16 H 2. c -0.,0 -0.,-0. -0.65,-0. V 4.95 c 0,-0. 0.,-0.65 0.65,-0.65 h 4. z' id='path4' style='stroke-width:0.65;fill:%23b3b3b3;fill-opacity:1' sodipodi:nodetypes='csscsscsscc' /%3E%3C/svg%3E%0A"); margin: 0 5px 0 0; }