假设您要使用the fa-chevron-right icon, 您只需通过CSS以列表项为目标。使用:after 伪类：
.list-item:after {
font-family: FontAwesome; // or whatever the font awesome family is registered as
content: \'\\f054\';
}
因此，为了了解如何通过回调传递动态CSS（可以轻松调整为自定义插件选项），下面是一个示例：
（注意：“插件”和“主题”在下面可以互换。）
首先，我们将修改CSS以专门针对小部件内的列表项。WordPress添加了一个类，.widget, 到小部件容器。因此，您可以针对以下目标：
.widget .list-item:after {}
或者，如果这些都将打包在注册自定义小部件的插件中，那么您可以通过
$widget_ops 阵列：
$widget_ops = array(
\'classname\' => \'custom-widget-classname\',
\'description\' => __( \'Custom Widget Description\', \'namespace\' )
);
因此，您可以针对该自定义类名：
.custom-widget-classname .list-item:after {}
或者，如果您想以核心“类别”小部件为目标，您可以使用
.widget_categories 班我们将以这种方法为例。
我们将把它放在回调中，连接到wp_head, 虽然你可以很容易地使用wp_print_styles:
function pluginslug_fontawesome_styles() {
// Code will go here
}
add_action( \'wp_head\', \'pluginslug_fontawesome_styles\' );
在内部，我们将输出一个样式表，使用上面的规则：
function pluginslug_fontawesome_styles() {
?>
<script type="text/css">
.widget_categories .list-item:after {
font-family: FontAwesome; // or whatever the font awesome family is registered as
content: \'\\f054\';
}
</script>
<?php
}
add_action( \'wp_head\', \'pluginslug_fontawesome_styles\' );
至此，您已完成。简单的豌豆。但是，由于您已经在PHP函数中，您可以通过使用变量轻松地使此样式表成为动态的：
function pluginslug_fontawesome_styles() {
// Define list-style icon variable
$list_item_icon = \'\\f054\';
// ...snip:
content: <?php echo $list_item_icon; ?>;
现在，使用自定义插件选项值很简单，只需将其传递给变量即可：
function pluginslug_fontawesome_styles() {
// Get Plugin options, assumed to be an array
$plugin_options = get_option( \'pluginslug_plugin_options\' );
// Define list-style icon variable
$list_item_icon = $plugin_options[\'list_item_icon\'];
// Output stylesheet
?>
<script type="text/css">
.widget_categories .list-item:after {
font-family: FontAwesome; // or whatever the font awesome family is registered as
content: <?php echo $list_item_icon; ?>;
}
</script>
<?php
}
add_action( \'wp_head\', \'pluginslug_fontawesome_styles\' );
就是这样！动态CSS，输出实际图标（不是背景图像），从插件选项中提取。
而且，由于它只是CSS，所以很容易扩展到几乎任何您可以想象的选择器，而不仅仅限于小部件中的列表项。
