Я использую (отличный) Font-Awesome на своем сайте, и он отлично работает, если я использую его следующим образом:
<i class="icon-home"></i>
Но (по некоторым причинам) я хочу использовать его в способе Unicode, например:
<i></i>
Но это не сработает - вместо этого браузер показывает квадрат.
Как я могу это решить? Путь CSS правильный (как первый способ использования Font Awesome работает).
Изменить: у меня установлен FontAwesome.otf.
Это не работает, потому что <i></i> просто просит браузер отобразить код U + F015 с частным использованием, используя курсивный шрифт. Шрифт Awesome CSS-код не имеет ничего, что могло бы повлиять на это. Если вы добавите в тег class=icon-home, вы получите глиф, присвоенный U + F015 шрифтом FontAwesome, но вы получите его дважды, из-за того, как работает Font Awesome trickery.
Чтобы получить глиф только один раз, вам нужно использовать CSS, который просит использовать шрифт FontAwesome, не вызывая правила, которые добавляют глиф через сгенерированный контент. Простым трюком является использование имени класса, начинающегося с icon-, но не соответствующего ни одному из предопределенных имен в Font Awesome или любом имени, которое иначе использовалось бы в вашем коде CSS или JavaScript. Например.
<i class=icon-foo></i>
В качестве альтернативы используйте CSS-код, который устанавливает font-family: FontAwesome и font-style: normal в элементе i.
PS. Обратите внимание на то, что точки доступа частного использования, такие как U + F015, по определению не имеют интероперабельного значения. Следовательно, когда таблицы стилей отключены,  не будет отображаться как символ; браузер будет использовать способ передачи данных undefined, таких как небольшой ящик, возможно содержащий номер кодовой точки.
Вы должны использовать класс fa:
<i class="fa">

</i>
<i class="fa fa-2x">

</i>
У меня возникла аналогичная проблема с использованием Unicode и Fontawesome. когда я написал:
font-family: 'Font Awesome\ 5 Free';
content: "\f061"; /* FontAwesome Unicode */
В Google Chrome вместо значка отображается квадрат. Новая версия Font Awesome также требует
font-weight: 900;
Это работа для меня.
От: https://github.com/FortAwesome/Font-Awesome/issues/11946
Надеюсь, что это поможет.
Для тех, кто может наткнуться на этот пост, вам необходимо установить
font-family: FontAwesome;
в качестве свойства в вашем селекторе CSS, а затем Unicode будет хорошо работать в CSS
Я обнаружил, что в Font-Awesome версии 5 (бесплатной) вы добавляете: " font-family: Font Awesome\5 Free; " только тогда кажется, что он работает правильно.
Это сработало для меня :)
Я надеюсь, что некоторые находят это полезным
После прочтения ответа davidhund на на этой странице Я придумал решение, что ваш веб-шрифт загружен неправильно, чтобы я был проблема неправильных путей.
Вот что он сказал:
Мое первое предположение: вы включаете веб-сайт FontAwesome из другой (суб) домен. Поэтому убедитесь, что вы установили правильные заголовки эти webfont файлы: "вам нужно будет добавить Заголовок Access-Control-Allow-Origin, белый список домена, который вы вытаскивая актив из." https://github.com/h5bp/html5boilerplate.com/blob/master/src/.htaccess#L78-86
А также посмотрите font-gotchas:)
Надеюсь, я поняла и помогла вам:)
На той же странице f135ta сказал:
... Я исправил проблему, загрузив файл "fontawesome-webfont.ttf" на мой веб-сервер и установить его как обычный шрифт. Я не знаю, если его часть pre-req для его использования в любом случае, но она работает для меня; -
Вы также можете использовать значок FontAwesome с псевдо-селектором CSS3, как показано ниже. 
Убедитесь, что для font-family установлено значение FontAwesome, как показано ниже:
table.dataTable thead th.sorting:after {font-family: FontAwesome;}
Чтобы вышеперечисленное сработало, вы должны сделать следующее:
<head></head> вашего приложения, как показано ниже: Я обнаружил, что это сработало
content: "\f2d7" !important;
font-family: FontAwesome !important;
Похоже, это не работает без! Важно для меня.
Вот учебник о том, как изменить значки социальных сетей с помощью Unicodes https://www.youtube.com/watch?v=-jgDs2agkE0&feature=youtu.be
Обязательно загрузите стиль FontAwesome перед вашим.
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f007";
Вы можете найти объяснения FontAwesome здесь: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
Просто добавлю на Jukka K. Korpela ответ выше, шрифт awesome уже определил css селектор "fa". Вы можете просто сделать <i class="fa"></i>. Ловушка здесь: fa определяет стиль шрифта: normal, если вам нужен курсив, вы можете переопределить как <i class="fa" style="font-style:italic"></i>
Имейте в виду, что вам может понадобиться указать номер версии, так как вы можете использовать либо:
font-family: 'Font Awesome 5 Pro';
или же
font-family: 'Font Awesome 5 Free';
Мне известны три семейства шрифтов, из которых вы можете выбирать, и у каждого есть свой собственный весовой элемент, который необходимо применить:
Первый
font-family: 'Font Awesome 5 Brands'; content: "\f373";
второй
font-family: 'Font Awesome 5 Free'; content: "\f061"; font-weight: 900;
В третьих
font-family: 'Font Awesome 5 Pro';
Ссылка здесь - https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
Надеюсь это поможет.