Правильный CSS для создания флажка li, который работает кросс-браузер

Я использую следующий CSS для добавления галочек перед моими элементами <li>:

ul.checkmark li:before {
    content:"\2713\0020";
}

И затем в HTML:

<ul class="checkmark">
   <li>Learn the keyboard at your own pace</li>
</ul>

Отлично работает в Safari, Firefox и Chrome, но отображает "freak out boxes" на IE8.

Safari:

IE8:

Есть ли переносимый способ указать красивую галочку, которая будет работать во всех основных браузерах?

Решение EDIT: Я закончил использовать вариант ответа медитера ниже:

ul.checkmark li {
    background:url("../checkmark.gif") no-repeat 0 50%;
    padding-left: 20px;
}

ul.checkmark {
    list-style-type: none;
}

Ответ 1

li { background:url(/images/checkmark.gif) no-repeat 0 50%; }

Вероятно, это единственный способ заставить его работать последовательно в IE до 8/9.

Ответ 2

ul
{
    list-style-image:url("/default_unchecked.png");
    /* other list styles*/
 }

а затем измените его с помощью javascript, возможно.

$('.selected').css("list-style-image", "url('/images/blueball.gif')");

Ответ 3

Хммм, как насчет перехода с небольшим изображением, тогда вы получите полную совместимость практически со всеми браузерами

Альтернативно взгляните на этот прошлый вопрос Отметить символ в HTML/XHTML

Ответ 4

Я не уверен, что кому-то еще нужно поддерживать IE8, но я хотел узнать, почему IE8 создает эти поля, поэтому я искал в Интернете и нашел это сообщение: Юникод и Интернет Проводник

Итак, основываясь на ответах на этот вопрос, похоже, вы можете использовать метод, описанный OP, вам просто нужно указать шрифт Unicode, чтобы сделать IE8 счастливым. Поэтому теоретически это должно работать нормально:

ul.checkmark {
    list-style-type:none;
}
ul.checkmark li:before {
    content:"\2713\0020";
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}

<ul class="checkmark">
    <li>Learn the keyboard at your own pace</li>
</ul>

Ответ 5

Я понимаю, что это старый пост, но, учитывая множество вариаций размеров экрана и плотности пикселей на мобильных устройствах, я считаю, что лучший подход заключается в преобразовании вашего значка в шрифт с помощью программы типа Icomoon: https://icomoon.io/

Поместите файлы шрифтов на свой сервер, и css будет выглядеть примерно так.

@font-face {
    font-family: 'IcoMoon-Free';
    src: url('/fonts/IcoMoon-Free.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'IcoMoon-Free' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-checkmark:before {
    content: "\ea10";
}

html будет выглядеть примерно так:

<span class="icon icon-checkmark"></span>