字体真棒我 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

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

Answer 2

您需要使用其 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;
}

字体真棒我 css

Font Awesome i css

css

font-awesome