【CSS 片段】调大文档树 emoji

修改文档树中 emoji 大小

• 灵感来源于群友的求助
  • 想起来很久以前也有群友求助怎么调大文档树 emoji
  • 先直接上对比图

/* 设置文档树emoji所在容器大小，要大于下文中emoji大小（26px > 22px） */
.b3-list-item__icon {
    line-height: 26px;
    height: 26px;
    width: auto;
}


/* 具体设置文档树中emoji大小 */
.b3-list-item__icon svg,
.b3-list-item__icon img {
    height: 22px;
    width: 22px;
}
​

修改正文中 emoji 大小

• 由于在正文中，emoji 属于行内元素，和文字是一样的，所以没办法直接调大 emoji 大小
  • 不过可以通过字体中的接口，需要调大的 emoji，选中后将其设置相应格式即可
  • 同理，这个不仅可以调大 emoji，也可以调大文字大小

格式设置面板

效果图

相关代码

/* 调用第12个字体接口，将其功能设置为增大字体为1.3倍大小 */
strong[style="color: var(--b3-font-color12);"] {
    color: inherit !important;
    font-size: 1.3em;
}

/* 将字体面板的第12个接口外观设置为加号 */
.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color12)"]:before {
    content: "+";
    font-size: 2em;
    position: relative;
    top: -0.05em;
}
​

大家有什么 CSS 的问题，多在群里交流~