Как заставить Фонтелло играть с Метеором

Question

Я пытаюсь перенести мой текущий проект на Meteor, который содержит стандартную файловую структуру fontello:

css
    fontello.css
    ...
font
    fontello.eot
    fontello.svg
    fontello.ttf
    fontello.woff

Я исправил пути fontello.css, чтобы они указывали на папку public, используемую Meteor:

@font-face {
  font-family: 'fontello';
  src: url('/font/fontello.eot?35453292');
  src: url('/font/fontello.eot?35453292#iefix') format('embedded-opentype'),
       url('/font/fontello.woff?35453292') format('woff'),
       url('/font/fontello.ttf?35453292') format('truetype'),
       url('/font/fontello.svg?35453292#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

Поэтому я переместил вышеупомянутую папку 'font' в указанную 'public' папку.

Кроме того, я создал новый пакет Meteor, в котором файл package.js содержит:

Package.onUse(function(api) {
    api.versionsFrom('1.0.3.1');
    api.addFiles('my-fontello.js'); 
    api.addFiles('font/fontello.eot', "client");
    api.addFiles('font/fontello.svg', "client");
    api.addFiles('font/fontello.ttf', "client");
    api.addFiles('font/fontello.woff', "client");
    api.addFiles('css/fontello.css', "client");
    api.addFiles('css/animation.css', "client");
});

Я не вижу каких-либо значков шрифтов, есть идеи?

Answer 1

Как вы положили свои файлы внутри publicдоступа к файлам из корневой папки будет достаточно (см. следующий код для того же самого) и указатели на ваши файлы как-то неправильно, я вижу, как вы положили # а также ? в URL, который не должен быть там.

@font-face {
  font-family: 'fontello';
  src: url(/font/fontello.eot);
  src: url(/font/fontello.eot) format('embedded-opentype'),
       url(/font/fontello.woff) format('woff'),
       url(/font/fontello.ttf) format('truetype'),
       url(/font/fontello.svg) format('svg');
  font-weight: normal;
  font-style: normal;
}

и для использования в пакете вам нужно начать путь с public как показано ниже

Package.onUse(function(api) {
    api.versionsFrom('1.0.3.1');
    api.addFiles('tidee-fontello.js');  // put the location from root directory
    api.addFiles('public/font/fontello.eot', "client");
    api.addFiles('public/font/fontello.svg', "client");
    api.addFiles('public/font/fontello.ttf', "client");
    api.addFiles('public/font/fontello.woff', "client");
    api.addFiles('public/css/fontello.css', "client");
    api.addFiles('public/css/animation.css', "client");
});

Надеюсь это поможет

Answer 2

У меня есть аналогичная настройка с

client
  stylesheets
    fontello-social.css
public
  fonts
    fontello-social.eot
    fontello-social.svg
    fontello-social.ttf
    fontello-social.woff

Я не использую файл пакета вообще.

В файле fontello-social.css пути URL для 4 файлов имеют вид /fonts/filename, поскольку "public" отображается на "/"

Answer 3

Исправлена:

1) Хотя я создал свой пакет, я фактически не добавил его в свое приложение. Поэтому я выполнил команду "sudo meteor add my-fontello".

2) Нет необходимости перемещать какие-либо ресурсы fontello в общую папку. Вместо этого файл fontello.css был обновлен до следующего:

@font-face {
    font-family: 'fontello';
    src: url('../font/fontello.eot?35453292');
    src: url('../font/fontello.eot?35453292#iefix') format('embedded-opentype'),
         url('../font/fontello.woff?35453292') format('woff'),
         url('../font/fontello.ttf?35453292') format('truetype'),
         url('../font/fontello.svg?35453292#fontello') format('svg');
         font-weight: normal;
         font-style: normal;
}

... и файл package.js был обновлен до следующего:

Package.onUse(function(api) {
    api.versionsFrom('1.0.3.1');
    api.addFiles('my-fontello.js'); 
    api.addFiles('font/fontello.eot', "client");
    api.addFiles('font/fontello.svg', "client");
    api.addFiles('font/fontello.ttf', "client");
    api.addFiles('font/fontello.woff', "client");
    api.addFiles('css/fontello.css', "client");
    api.addFiles('css/animation.css', "client");
});

Стоит также упомянуть, что для того, чтобы Meteor смог забрать изменения, внесенные в файл CSS в этом пакете, мне нужно было перезапустить приложение Meteor.