Font Awesome i css

Question

I would like to change the + in the css into a shopping cart. I have installed Font Awesome on my site but when i put the line <i class="fa fa-cart-plus"></i> in it does not work.

It looks like this in the css so i want the + in content to be the shopping cart instead. Can anyone help me?

.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;

}

Niklas · Accepted Answer · 2015-03-05T10:53:17.137

You'll need to add the icon using its the ASCII code. You can figure out the ASCII in the Font Awesome Cheat Sheet. There you have all the icons and their Unicode representation. The one you want is the fa-cart-plus one that is . The ASCII version of this is the four hexadecimal numbers before the semi-colon with a leading backslash: \f217.

Once we have that, we can use it in the CSS as follows:

HTML

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

CSS

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

Working JSFiddle.

(Obviously you'll need to have the Font Awesome library installed and included.)

Your CSS should look like this

.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;
}

Thank you for the answer! I can't get it to work. Where do i need to put the lines you wrote? And do I need to put the HTML line in somewhere? — Benjamin Birkebæk, Mar 05 '15 at 09:28
Have a look at my updated answer. The HTML line isn't needed. If it still doesn't work. Make sure that you have "installed" FontAwesome correctly and included the CSS file and so on. — Niklas, Mar 05 '15 at 09:34
I'm sorry my stupid questions. But it still doesn't work. I have done like this page says but do I need to put the css file somewhere? — Benjamin Birkebæk, Mar 05 '15 at 10:28
Hard to tell without seeing your actual project. Can you provide a link perhaps? — Niklas, Mar 05 '15 at 10:31
At first sight, you seem to have forgotten the \ (backslash) in the ASCII code: `content: "f217";` should be `content: "\f217";`. — Niklas, Mar 05 '15 at 10:49

score 0 · Answer 2 · answered Mar 05 '15 at 08:27

0

Did you try <i class="icon-shopping-cart"></i> ? See list of icons

answered Mar 05 '15 at 08:27

Tepken Vannkorn

9,550
14
58
85

Font Awesome i css

2 Answers2