Check mark “\2714” not working?

问题

I'm customizing a checkbox and it seems to be functioning but the unicode check isn't working... it's appearing as the text "\2714".
Here's my code:

.edd_price_option_1762 {
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 3px solid #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 9px;
    border-radius: 0px;
    display: inline-block;
    position: relative;
    top: 8px;
}
.edd_price_option_1762:active, .edd_price_option_1762:checked:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.edd_price_option_1762:checked {
    background-color: #e9ecee;
    border: 3px solid #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
    color: #99a1a7;
}
.edd_price_option_1762:checked:after {
    content:"\2714";
    font-size: 19px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #49a6db;
}

回答1:

You are missing a back slash \ in your markup.

It should be content: "\2714"; currently it is: content: "2714";

jsFiddle demo - the code you posted is correct - it just doesn't match up with that is being implemented on the page.

回答2:

The dev tools state that your css is:

.edd_price_option_1762:checked:after {
    content: "2714 ";
    font-size: 19px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #49a6db;
}

Change it to (add a slash):

.edd_price_option_1762:checked:after {
    content: "\2714";
    font-size: 19px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #49a6db;
}

See attached screenshot:

回答3:

I don't know whether this will help in any ways. But was experimenting so thought you should see this:

fiddle

Using javascript

document.getElementById('test').innerHTML = "&#x2714;"

See if it helps. I read somewhere to use HTML entity :) some thing like ✔

回答4:

Have you tried using single quotes? Don't know if it will help, but in my css I'm using content: ' \2714'; and the check mark is showing fine, except in <=IE7 where I use a graphic instead.

来源：https://stackoverflow.com/questions/19082146/check-mark-2714-not-working

标签

html

css

unicode

checkbox