字体真棒我的CSS [重复]

Question

我想把css中的+号改成购物车。我已经在我的网站上安装了 Font Awesome，但是当我将 <i class="fa fa-cart-plus"></i> 行放入其中时，它不起作用。

它在 css 中看起来像这样，所以我希望内容中的 + 成为购物车。谁能帮帮我？

.woocommerce #content-container a.button.add_to_cart_button:before, .woocommerce-page #content-container a.button.add_to_cart_button:before, .woocommerce #content-container button.button.add_to_cart_button:before, .woocommerce-page #content-container button.button.add_to_cart_button:before, .woocommerce #content-containerinput.button.add_to_cart_button:before, .woocommerce-page #content-containerinput.button.add_to_cart_button:before, .woocommerce #content-container#respond input#submit.add_to_cart_button:before, .woocommerce-page #content-container#respond input#submit.add_to_cart_button:before, .woocommerce #content-container#content input.button.add_to_cart_button:before, .woocommerce-page #content-container#content input.button.add_to_cart_button:before, .woocommerce #content-container a.button.add_to_cart_button:before, .woocommerce-page #content-container a.button.add_to_cart_button:before, .woocommerce .products a.button.add_to_cart_button:before, .woocommerce-page .products a.button.add_to_cart_button:before, .woocommerce .products button.button.add_to_cart_button:before, .woocommerce-page .products button.button.add_to_cart_button:before, .woocommerce .products input.button.add_to_cart_button:before, .woocommerce-page .products input.button.add_to_cart_button:before, .woocommerce #respond.products input#submit.add_to_cart_button:before, .woocommerce-page #respond.products input#submit.add_to_cart_button:before, .woocommerce #content.products input.button.add_to_cart_button:before, .woocommerce-page #content.products input.button.add_to_cart_button:before, .woocommerce .products a.button.add_to_cart_button:before, .woocommerce-page .products a.button.add_to_cart_button:before {
color: #ffffff;
content: "+";
font-size: 20px;
left: 0px;
line-height: 10px;
margin-right: 15px;
position: relative;
top: 3px;

}

Answer 1

您需要使用其 ASCII 代码添加图标。您可以在Font Awesome Cheat Sheet 中找出 ASCII。那里有所有图标及其 Unicode 表示。您想要的是fa-cart-plus 即。它的 ASCII 版本是分号前的四个十六进制数字，前导反斜杠：\f217。

一旦我们有了它，我们就可以在 CSS 中使用它，如下所示：

HTML

<p><span class="cart"></span></p>

CSS

.cart:before {
    font-family: FontAwesome;
    content: "\f217";
}

工作JSFiddle。

（显然您需要安装并包含 Font Awesome 库。）

您的 CSS 应如下所示

.woocommerce #content-container a.button.add_to_cart_button:before, .woocommerce-page #content-container a.button.add_to_cart_button:before, .woocommerce #content-container button.button.add_to_cart_button:before, .woocommerce-page #content-container button.button.add_to_cart_button:before, .woocommerce #content-containerinput.button.add_to_cart_button:before, .woocommerce-page #content-containerinput.button.add_to_cart_button:before, .woocommerce #content-container#respond input#submit.add_to_cart_button:before, .woocommerce-page #content-container#respond input#submit.add_to_cart_button:before, .woocommerce #content-container#content input.button.add_to_cart_button:before, .woocommerce-page #content-container#content input.button.add_to_cart_button:before, .woocommerce #content-container a.button.add_to_cart_button:before, .woocommerce-page #content-container a.button.add_to_cart_button:before, .woocommerce .products a.button.add_to_cart_button:before, .woocommerce-page .products a.button.add_to_cart_button:before, .woocommerce .products button.button.add_to_cart_button:before, .woocommerce-page .products button.button.add_to_cart_button:before, .woocommerce .products input.button.add_to_cart_button:before, .woocommerce-page .products input.button.add_to_cart_button:before, .woocommerce #respond.products input#submit.add_to_cart_button:before, .woocommerce-page #respond.products input#submit.add_to_cart_button:before, .woocommerce #content.products input.button.add_to_cart_button:before, .woocommerce-page #content.products input.button.add_to_cart_button:before, .woocommerce .products a.button.add_to_cart_button:before, .woocommerce-page .products a.button.add_to_cart_button:before {
    color: #ffffff;
    font-family: FontAwesome; /* Here */
    content: "\f217"; /* And here */
    font-size: 20px;
    left: 0px;
    line-height: 10px;
    margin-right: 15px;
    position: relative;
    top: 3px;
}

Answer 2

你试过<i class="icon-shopping-cart"></i> 吗？ 见list of icons