WedX - журнал о программировании и компьютерных науках

Почему не работают значки с потрясающим шрифтом?

Я запускаю свой сервер NodeJS и тестирую его на локальном хосте: 3000. Все работает нормально, но значки с потрясающими шрифтами отображаются так, как будто файлы шрифтов отсутствуют. Он делает то же самое в Firefox и Chrome. (Я даже проверил в firebug и проверил на вкладке «Сеть», что все ожидаемые библиотеки приходят на веб-страницу.)

РЕДАКТИРОВАТЬ: Большинство деталей не имеют значения. Прочитайте принятый ответ, прежде чем тратить время на чтение моего подробного вопроса.

Снимок экрана:

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

Версии программного обеспечения:

  • Фаерфокс 28.0
  • Хром 34.0.1847.116
  • Экспресс 3.2.6
  • Джейд 1.3.1
  • Меньше 1.7.0
  • нодемон 1.0.17
  • Потрясающий шрифт 4.0.3
  • Начальная загрузка 3.1.1
  • JQuery 1.11.0

Структура проекта:

MyApp
+--node_modules
|--public
|  +--stylesheets
|  |--lib
|  |  +--bootstrap
|  |  +--font-awesome
|  |  +--jquery
|--routes
|  |--index.js
|--views
|  |--index.jade
|--app.js
|--package.json

ПРИМЕЧАНИЕ. Каталог font-awesome содержит все содержимое, извлеченное из шрифта awesome ссылка для скачивания.

index.jade:

doctype html
html
    head
        title= title
        meta(charset='utf-8')
        link(rel='stylesheet', href='/lib/bootstrap/css/bootstrap.css')

        // I tried font-awesome locally:
        link(rel='stylesheet', href='/lib/font-awesome/css/font-awesome.css')

        // And from the CDN:
        //link(rel='stylesheet' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css')

        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        span Text before icons:
        i.fa-globe
        i.fa-plus

    script(type='text/javascript', src='/lib/jquery/js/jquery.js')
    script(type='text/javascript', src='/lib/underscore/js/underscore.js')
    script(type='text/javascript', src='/lib/bootstrap/js/bootstrap.js')

приложение.js:

var express = require('express');
var routes = require('./routes');
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('env', 'development');
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if('development' === app.get('env')){
    app.use(express.logger('dev'));
    app.use(express.errorHandler());
}

// routes
app.get('/', routes.index);

http.createServer(app).listen(app.get('port'), function(){
    console.log('Express server listening on port ' + app.get('port'));
});

index.js:

exports.index = function(req, res){
    res.render('index', { title : 'MyApp' });
};
09.04.2014

Ответы:


1

У вас должен быть класс fa, а также fa-globe из этой статьи.

так в вашем коде

span Text before icons:
i.fa.fa-globe
i.fa.fa-plus
09.04.2014
  • Вот это да. Я только что потратил час на написание своего вопроса, и это потому, что я пропустил урок. Большое спасибо, и я чувствую себя таким глупым. ›_‹ 09.04.2014
  • Не беспокойтесь об этом. Иногда вы слишком долго смотрели на что-то и вам нужна еще одна пара глаз. 09.04.2014
  • Новые материалы

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..


    Для любых предложений по сайту: wedx@cp9.ru