Icon font from fontello не работает с Meteor js

Question

Я загрузил пользовательский значок шрифта из fontello и намерен использовать его в моем приложении meteor. Я попробовал демонстрацию, которая поставляется с загруженным пакетом, и шрифты отображаются в порядке. Вот мой CSS:

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

[class^="icon-"]:before, [class*=" icon-"]:before { 
font-family: "fontello"; 
font-style: normal; 
font-weight: normal; 
speak: none; 
display: inline-block; 
text-decoration: inherit; 
width: 1em; 
margin-right: .2em; 
text-align: center; 

/* For safety - reset parent styles, that can break glyph codes*/ 
font-variant: normal; 
text-transform: none; 

/* fix buttons height, for twitter bootstrap */ 
line-height: 1em; 

} 

.icon-twitter:before { content: '\e805'; } /* '' */ 
.icon-github-circled:before { content: '\e804'; } /* '' */ 
.icon-pencil:before { content: '\e801'; } /* '' */ 
.icon-cancel:before { content: '\e802'; } /* '' */ 
.icon-chat:before { content: '\e800'; } /* '' */ 

Моя структура папок, как так /client/css/styles.css и шрифты /client/css/fonts/

В моем HTML я добавил эту разметку <i class="icon-twitter"></i> и, к сожалению, все, что я вижу, когда я смотрю на страницу все это Я вижу Любая помощь будет замечательной. Благодаря

Answer 1

Если вы хотите, чтобы ссылаться на шрифты в your.domain.com/fonts/font_name.x, вы должны переместить fonts директорию в директорию с надписью public. Затем вы можете получить к ним доступ, используя путь /fonts/font_name.x.

Взгляните на Неофициальный Метеор FAQ здесь: https://github.com/oortcloud/unofficial-meteor-faq#where-should-i-put-my-files

общественные/# < - статические файлы, такие как изображения, которые выполняются непосредственно.

Или документация Метеор непосредственно: http://docs.meteor.com/#structuringyourapp

Наконец, сервер Метеор будет обслуживать любые файлы в общественном директории, так же, как в проекте Rails или Django. Это место для изображений, favicon.ico, robots.txt и всего остального.

Answer 2

Попробуйте использовать абсолютные пути:

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

Кроме того, было бы лучше хранить шрифты в /public как в режиме производства /client не будет работать больше, и вы получите эти квадраты снова & вы могли бы использовать вместо /fonts/ (для сопоставления /public/fonts)

Answer 3

Я была такая же проблема и как я была решена с помощью этих абсолютных путей:

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

Непосредственно на общедоступном/шрифты/каталог. Я предполагаю, что MeteorJS достаточно умен, чтобы угадать пути.