Question

我想在我的某些结帐字段中添加一个小图标，以便使电话字段根据所附图像具有电话等的小图片。

我试图将下面的代码放入CSS中，但是没有用...我应该在Fontawesome上尝试使用它吗？如果可以，代码会是什么样子？谢谢！

#billing_phone {
      background-image: url('wp-content/uploads/2018/11/Asset-1.svg');
      background-repeat: no-repeat;
      background-position: left center;
      padding-left: 16px;

jQuery documentation

Answer 1

我会考虑使用超棒的字体，然后将其插入占位符，并在子主题内的functions.php中添加此函数并进行编辑

add_filter('woocommerce_default_address_fields', 'override_default_address_checkout_fields', 20, 1);
function override_default_address_checkout_fields( $address_fields ) {
    $address_fields['first_name']['placeholder'] = 'ADD FONT AWESOME UNICODE HERE';
    $address_fields['last_name']['placeholder'] = 'ADD FONT AWESOME UNICODE HERE';
    $address_fields['address_1']['placeholder'] = 'ADD FONT AWESOME UNICODE HERE';
    $address_fields['state']['placeholder'] = 'ADD FONT AWESOME UNICODE HERE';
    $address_fields['postcode']['placeholder'] = 'ADD FONT AWESOME UNICODE HERE';
    $address_fields['city']['placeholder'] = 'ADD FONT AWESOME UNICODE HERE';
    return $address_fields;
}

使用 font awesome cheatsheet

要获得所需图标的正确unicode，所有这些都是假设您已经在网站中加入了超棒的字体，并且可能需要进行一些样式设置，例如颜色和大小

woocommerce在结帐字段中添加图标

1 个答案: