真棒字体:为什么我的箭头图标没有加载到:after实例上?

因此,自我启动此网站(https://shop.cafedumonde.com/)以来,我一直遇到此问题。每当我单击“添加到购物车”按钮时,按钮都会展开,并且“字体真棒”中的向右箭头图标会出现。它从来没有做过,我尝试了各种方法使其正常工作,但无济于事。这是我正在使用的代码。首先是HTML:

<div class="wp-block-button wc-block-grid__product-add-to-cart">
    <a href="?add-to-cart=46198" aria-label="Add &ldquo;Beignet Mix&rdquo; to your cart" data-quantity="1" data-product_id="46198" data-product_sku="R2A" rel="nofollow" class="wp-block-button__link add_to_cart_button ajax_add_to_cart">Add to cart</a>
 </div>

CSS:

.wc-block-grid__product-add-to-cart a.added::after {
    color: #fff;
    content: '\f0a9';
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
wearcoll658 回答:真棒字体:为什么我的箭头图标没有加载到:after实例上?

在可以向购物车中添加商品的页面上,我似乎在任何地方都找不到此类:wc-block-grid__product-add-to-cart-这很可能是您遇到问题的原因(除非我没有看清楚页面,在这种情况下,您能告诉我应该浏览哪个页面?)

编辑:问题是Font Awesome正在使用图标作为字体。加载字体时,您需要显式加载您正在使用的粗细。在您的情况下,损坏它的问题是font-weight: normal;属性-删除它,您的图标应该可以工作了:)

本文链接:https://www.f2er.com/3039107.html

大家都在问