思源笔记如何修改文档树 emoji 图标大小

思源笔记如何修改文档树 emoji 表情图标大小

【如果懒得看内容，可以直接下拉找到代码片段总结。】

思源的自定义表情非常不错，支持各种图片，包括 GIF 动态图。

但是，当在文档树中使用自定义 emoji 的时候，会出现表情明显偏小，导致排版不佳，视觉效果不好，强迫症直接爆炸 💣，如何解决此问题。以下设置代码片段都可以直接粘贴进去。

如果以下代码片段有没有生效的内容，可以在属性末尾分号前添加!important 执行覆盖，请注意，分号前，属性的值必须以分号结尾。

添加自定义表情

打开设置，或者点击左上角工作区名进入设置。路径：设置 ➡️ 外观 ➡️ 添加自定义表情 ➡️ 打开文件位置

所在文件夹路径应为：

 工作区名称\data\emojis\
​

可以直接将图片放置在这里，不特定图片格式，GIF 也可以放在这里。

也可以创建一个分类文件夹方便查找。需要注意：只支持一级文件夹，也就是说内部如何再建子文件夹是不识别的。

将图片粘贴到文件夹，或者粘贴到新建的文件夹中

无须重启思源笔记，可以从自定义表情中找到已放入图片。

可以看到，系统表情与我们自定义表情大小不一致，所以需要进入以下调试。

代码片段

【同样，如果懒得看内容，可以直接下拉找到代码片段总结。】

1. 设置：
   依然是先打开设置，或者点击左上角工作区名进入设置。路径：设置 ➡️ 外观 ➡️ 代码片段

2. 在 CSS 侧增加代码片段修改默认表情大小（以下代码片段都可以直接复制使用）

   注意，这里修改的并不是自定义图标大小，是内置 emoji 表情大小。自定义请继续往下看。

    /*修改表情大小*/
    .b3-list-item__icon {
        font-size: 22px !important;
        margin-right: 8px;
    }
   ​

   • font-size 属性调整的是表情大小
   • margin-right 调整的是表情右侧外边距，这里就是与表情旁边文字的距离了。

3. 修改自定义表情大小，由于自定义表情都是图片生成，所以无法使用 font-size 去修改，要使用宽高属性。

    /*修改自定义表情-其实是图片大小*/
    .b3-list-item__icon svg, .b3-menu__avemoji svg, .b3-list-item__icon img, .b3-menu__avemoji img {
        height:22px!important;
        width:100%!important;
        margin:0 2px!important;
    }
   ​

   • height：高度，设置成和第一步的默认表情的 font-size 参数一样。
   • width:100%; 百分百表示全宽占满，这个无须修改。
   • margin: 0 2px; 这个是调整的居中，内部左右边距。如果我设置的 2px 对你的配置来说过大或者过小，可以另做调试，调大或者调小。

4. 由于表情变大后，文字与之可能不对齐，所以可以继续调整文字的大小与纵向位移，继续添加 CSS 代码片段：

    /*修改文字大小*/
    .b3-list-item__text {
        font-size: 14px !important;
        line-height: 20px !important;
        height: 20px !important;
        transform: translateY(1px) !important;
    }
   ​

   • 此选择器内，font-size: 设置的是文字大小。
   • line-height 设置行高，如果文字过大导致出现吞字现象，可以调整行高。
   • height：文字高度，可以与行高一样，但不要小于行高。
   • transform:translateY(1px) ：纵向位移调整，文字如果偏上，没有保持在表情中间，可以调整此参数。即里面的 1px 可以调大。

5. 由于图标调整之后，数据库中的自定义表情图标可能无法正常显示，需要在 CSS 源代码后添加!important 来避免被覆盖

   /*防止数据库中的带图标的配置被覆盖*/
   .av__cell .b3-menu__avemoji img {
       height: calc(1.625em - 8px) !important;
       width: calc(1.625em - 8px) !important;
   }
   ​

6. 所有代码片段总结：

    /*修改表情大小*/
    .b3-list-item__icon {
        font-size: 22px !important;
        margin-right: 8px;
    }
    /*修改自定义表情-其实是图片大小*/
    .b3-list-item__icon svg, .b3-menu__avemoji svg, .b3-list-item__icon img, .b3-menu__avemoji img {
        height:22px!important;
        width:100%!important;
        margin:0 2px!important;
    }
    /*修改文字大小*/
    .b3-list-item__text {
        font-size: 14px !important;
        line-height: 20px !important;
        height: 20px !important;
        transform: translateY(1px) !important;
    }
   /*防止数据库中的带图标的配置被覆盖*/
   .av__cell .b3-menu__avemoji img {
       height: calc(1.625em - 8px) !important;
       width: calc(1.625em - 8px) !important;
   }
   ​

7. 这是最终效果
   

总结

最后，注意选择自定义表情的时候，要看清楚图片，有的图片本身有阴影，那么即便是放大了也会显得比较小。比如下图中的剑 3：

所以，尽量选择图片本身比较大的，其中可见元素能填满整个图片大小，在自定义表情中的展示效果，才是极佳。