如何在::before伪元素的content属性中使用Icomoon图标？

问题背景 #

在React项目中直接调用Icomoon图标一切正常，但将图标字符设置为第三方库元素的::before伪元素content时，页面显示的是原始字符\e91f而非目标图标。

Icomoon自动生成的关键代码如下：

@font-face声明 #

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?xxx');
  src:  url('fonts/icomoon.eot?xxx#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?xxx') format('truetype'),
    url('fonts/icomoon.woff?xxx') format('woff'),
    url('fonts/icomoon.svg?xxx#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

图标类声明 #

.icon-SomeIcon_ICO:before {
  content: "\e91f";
  color: #8898a9;
}

尝试的无效代码（styled-components中）：

.ag-class-wrapper::before {
    content: '\e91f';
    color: #8898a9;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

解决方法 #

问题根源是伪元素未指定使用Icomoon字体，只需添加对应字体属性即可解决：

方案1：直接修改伪元素样式 #

.ag-class-wrapper::before {
    content: '\e91f';
    color: #8898a9;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    /* 关键：指定使用Icomoon字体 */
    font-family: 'icomoon';
    font-weight: normal;
    font-style: normal;
}

方案2：复用Icomoon生成的类 #

给第三方库的元素添加icon-SomeIcon_ICO类，再调整位置等样式，避免重复编写content和字体设置：

// 在TSX中给元素添加类
<div className="ag-class-wrapper icon-SomeIcon_ICO"></div>

// 在styled-components中调整位置样式
.ag-class-wrapper {
    position: relative;
    &.icon-SomeIcon_ICO::before {
        position: absolute;
        top: 50%;
        left: 4px;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
    }
}

额外检查点 #

如果添加字体后仍不显示，确认@font-face中的字体文件路径是否正确，确保字体资源能被项目正确加载（比如React中可能需要用import引入字体文件，或调整url路径为相对项目的正确地址）。

内容的提问来源于stack exchange，提问作者Whichmann