尝试做一些我认为相对简单的事情。

这里是默认的woocommerce“；下单“；按钮

<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

Font Awesome有一个锁定图标<i class="fa fa-lock"></i>

我只想在按钮中添加此图标，如下所示：

... data-value="Place order"><i class="fa fa-lock"></i> Place order</button>

我尝试过的事情：

1.

覆盖payment.php “我的孩子”主题中的模板：child-theme/woocommerce/checkout/payment.php.

已更改line 52 --

<?php echo apply_filters( \'woocommerce_order_button_html\', \'<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="\' . esc_attr( $order_button_text ) . \'" data-value="\' . esc_attr( $order_button_text ) . \'"><i class="fa fa-lock"></i> \' . esc_html( $order_button_text ) . \'</button>\' ); // @codingStandardsIgnoreLine ?>

（只是简单地添加了<i class="fa fa-lock"></i> 之前Place order)

所以我去结帐，确认它正在我的子主题中加载我的模板，然后查看按钮。

没有变化。

<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

<通过功能

add_filter( \'woocommerce_order_button_html\', \'misha_custom_button_html\' );

 function misha_custom_button_html( $button_html ) {
     echo \'<pre>\';
     var_dump(html_entity_decode($button_html));
     echo \'</pre>\';
  return $button_html;
 }

同样的事情——我回去结账。

在结帐按钮的正上方，我看到var_dump

\'<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order"><i class="fa fa-lock"></i> Place order</button>\' (length=190)

因此它在var\\u转储中显示了正确的HTML，但它的正下方是按钮，

<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

没有变化。

我还尝试在函数中直接更改它，但由于某些原因，它无法为图标呈现正确的输出！意味着忽略图标html。

我可以更改按钮的文本，在按钮前后添加内容。。。但由于某些原因，我无法在其中添加此图标html。

很奇怪，我不明白。

为什么这个按钮如此顽固，我如何才能在按钮上添加字体很棒的图标？

#place_order::before {
    content: "\\f023";
    font-family: FontAwesome;
}