Шрифт классный черный прямоугольник

Попытка внедрить шрифт awesome в веб-проект, но на выходе получается прямоугольник со сплошной рамкой 1px. Я использую Sass с Codekit и соответствующим образом проверил свои пути. Смотри ниже

<сильный>1. main.scss

 @import 'base/font-awesome/font-awesome.scss';

<сильный>2. переменные.scss

$fa-font-path: "../font-awesome/fonts" !default;

<сильный>3. Структура папок

введите здесь описание изображения

<сильный>4. Вывод файла Main.css

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

<сильный>5. HTML

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

Что я делаю не так? Я проверил документы и просмотрел другие решения в stackoverflow, но, похоже, они не работают. Спасибо


css sass font-awesome codekit
person Samuel    schedule 09.11.2014    source источник
comment
Не могли бы вы опубликовать HTML?   -  person MinusFour    schedule 09.11.2014
comment
Какой браузер/версию вы используете для тестирования?   -  person Jason    schedule 09.11.2014
comment
Только что добавил. Достаточно хорошо?   -  person Samuel    schedule 09.11.2014

Ответы (1)


arrow_upward
4
arrow_downward

Вам не хватает класса fa, поэтому на самом деле используется не потрясающий шрифт, а другой. Сделай это так:

<i class="fa fa-twitter"></i>
person MinusFour    schedule 09.11.2014
comment
Вау, я пропустил эту маленькую деталь. Спасибо - person Samuel; 09.11.2014
comment
Забыл упомянуть, квадрат, который вы видите, связан с тем, что код символа не имеет представления символа вне шрифта. Многие шрифты работают так, они создают класс css только для настройки имени шрифта, так что следите за другими подобными шрифтами. - person MinusFour; 09.11.2014