WordPress动态CSS的after/before伪类内容无法访问图标字体输出恒为0

算力阿峰

2026-9-27

问题原因

核心错误：动态CSS代码中使用了absint()函数处理图标编码，该函数作用是将输入内容强制转换为非负整数，你传入的字体图标Unicode编码不属于有效整数格式，转换后直接输出为0，这是显示结果始终为0的直接原因。
控件调用错误：自定义器中创建文本输入控件却实例化了WP_Customize_Color_Control颜色选择控件，虽然指定了type为text，但写法不规范，可能引发兼容性问题。
潜在转义问题：编码前后多余的引号转义、PHP对反斜杠的自动解析，都可能导致输出到CSS的编码无法被字体识别。

修复方案

修正动态CSS代码，移除absint()，添加正确的转义处理

// 移除absint处理，保留原始编码格式
$back_top_before = get_theme_mod( 'back_top_before', '\f143' );
// 安全转义，避免XSS风险同时保留编码完整性
$back_top_before = esc_attr( wp_strip_all_tags( $back_top_before ) );

修正CSS输出逻辑，确保编码正确传递

.back_top:before{
    content:"<?php echo $back_top_before; ?>";
    display:inline-block;
    vertical-align:middle;
    font-size:14px;
    font-family:'amazing-neo';
}

如果是用PHP字符串拼接动态CSS，直接拼接变量即可，不需要额外给变量加多余的引号包裹。

修正自定义器配置代码，移除错误的颜色控件调用

$wp_customize->add_setting(
    'back_top_before',
    array(
        'type' => 'theme_mod',
        'default' => '\f143',
        'sanitize_callback' => 'sanitize_text_field'
    )
);
$wp_customize->add_control(
    'back_top_before', 
    array(
        'type' => 'text',
        'label' => esc_html__( 'Back to top icon', 'circle' ),
        'section' => 'circle_back_to_top_settings',
        'settings' => 'back_top_before',
    )
);