Возврат из FontAwesome, если загрузка шрифта заблокирована

Я разрабатываю веб-страницу и нашел FontAwesome как довольно аккуратный способ добавить приятные значки к вещам, однако по умолчанию загрузка шрифтов заблокирован плагин NoScript для Firefox.

Это не будет проблемой для обычных шрифтов, но FontAwesome использует символы Unicode, которые преднамеренно выходят за пределы обычного диапазона печати большинства шрифтов, поэтому добавление стека шрифтов в CSS (EG: font-family: FontAwesome, sans-serif;) не будет работать так, как все значки просто отображают как шестнадцатеричные квадраты.

Я понимаю, что могу настроить NoScript, чтобы разрешить загрузку шрифтов, но это не идеальное решение для всех пользователей - я бы предпочел, чтобы страница ухудшилась.

Конечно, было бы легко сделать это с помощью Javascript/jQuery, но, конечно, если он NoScript, который делает блокировку, которая тоже не помогает, и она не проходит тест, если пользователь не делает этого, t включить javascript.

Идеально было бы иметь некоторый стиль/правило CSS, который действует как резерв для любых объектов FontAwesome, заменяя их каким-то базовым символом или даже не отображая ничего.

Для тех, кто не знаком с FontAwesome/TL; DR:

Все значки FontAwesome имеют класс CSS "fa":

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

FontAwesome загружает пользовательский шрифт, подобный этому (я удалил

@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");
}

И тогда конкретный значок FontAwesome будет иметь свой собственный специфический класс, который вставляет соответствующий символ юникода, например:

.fa-star:before {
    content: "";
}

HTML для значка будет выглядеть так:

<i class="fa fa-star"></i>

Итак, проблема здесь: Нам нужно каким-то образом, желательно в CSS, заменить, удалить или скрыть содержимое элементов с помощью класса CSS "fa", если шрифт "FontAwesome" НЕ загружен.

Ответ 1

Ну, я думаю. Я решил это благодаря вам, ребята, ведущие меня в правильном направлении:

В голове я положил это:

<noscript>
    <style>
        [class*="fa-"]:before
        {
            content:"+";
        }
    </style>
</noscript>

Это выбирает каждый элемент класса fa-знака, все из которых определены в шаблоне:

.fa-heart:before {
  content: "\f004";
}

И заменяет содержимое родовым символом или, что-то еще, что нам может понадобиться вставить (в том числе ничего).

Это кажется разумным или есть какой-то ужасный побочный эффект, который я пропустил здесь?

Я понимаю, что есть удаленная возможность, что у кого-то есть блокировка шрифтов, но javascript включен, но на данный момент я рад игнорировать этот демографический клиент;)

Изменить для добавления:

По прошествии этого времени этот ответ все еще получает голоса (спасибо!), ясно, что это все еще проблема, поэтому я решил опубликовать эту ссылку о том, чтобы значительно улучшить (и обрезать) FontAwesome различными способами: FontAwesome Fixed

Мой любимый на самом деле встраивает выбранные значки в встроенный SVG с кодировкой Base64, либо в HTML, либо в ваш CSS. Это кажется довольно элегантным и эффективным, особенно если вам нужно только несколько значков из набора. FA по-прежнему чувствует себя как выдумка для меня.

Ответ 2

Один из способов обойти это - вытащить другой файл CSS для пользователей <noscript> и переопределить классы .fa-* для изображений или спрайтов.

Например:

<noscript>
<link rel="stylesheet" type="text/css" href="safe-icons.css" />
</noscript>

Ваш файл safe-icons.css может выглядеть примерно так:

.fa {
    display: inline-block;
    overflow: hidden;
    color: transparent;
    font-family: sans-serif;
    width: 16px;
    height: 16px;
    background-position: center center;
    background-repeat: no-repeat;
}

.fa-star { background-image: url('star.png'); }

Конечно, у вас будет проблема с иконками, вытащенными из FontAwesome, которые имеют разные размеры, но это, безусловно, приведет к балансу и отобразит хотя бы что-то для пользователей с поддержкой NoScript.

Ответ 3

Недавно я столкнулся с проблемами, когда JS включен, но пользователи находятся в защищенной сети, которая блокирует либо все веб-шрифты, либо FA.

Чтобы исправить это, я использовал нечто подобное для этого:

function css(element, property) {
  return window.getComputedStyle(element, null).getPropertyValue(property);
}

window.onload = function () {
  var span = document.createElement('span');

  span.className = 'fa';
  span.style.display = 'none';
  document.body.insertBefore(span, document.body.firstChild);

  if ((css(span, 'font-family')) !== 'FontAwesome') {
    // add a local fallback
  }
  document.body.removeChild(span);
};

В принципе, это немного jQuery, который создает элемент FA на странице и проверяет, правильно ли загружен шрифт. Если нет, вы можете реализовать резервную копию. В моем случае резервное копирование заключалось в том, чтобы вставить тег <img> с общим рисунком-заполнителем.

Это не чистый CSS, но он (1) допускает более мощные резервные меры и (2) охватывает больше сценариев, чем просто <noscript>