Как добавить новый шрифт для значков, например FontAwesome?

Я давно пользуюсь Sencha Touch, а теперь пробую Sencha Architect. Мне нужно включить FontAwesome, чтобы использовать больше значков в моих кнопках. Проблема в том, что я не знаю, где я должен написать:

@include icon-font('Awesome', inline-font-files('awesome/fontawesome-webfont.woff', woff, 'awesome/fontawesome-webfont.ttf', truetype,'awesome/fontawesome-webfont.svg', svg));

Кроме того, я не уверен, в какой папке должны находиться шрифты. Если я помещу шрифты в resources/scss/stylesheets/fonts/awesome, компилятор выдаст несколько ошибок. Если я помещу шрифты в Library/Application Support/Sencha/Sencha Architect 3.0/extracted/touch23-compile/themes/fonts, это сработает, но я не думаю, что это лучшее решение.

Кто-нибудь знает, как лучше всего включить новые шрифты в проект Sencha Architect?

Спасибо вам всем.


icons font-awesome sencha-touch sencha-touch-2 sencha-architect
person Watto    schedule 06.02.2014    source источник
comment
Вы можете видеть это: - stackoverflow.com/questions/21606558/   -  person Sujata Chanda    schedule 19.03.2014

Ответы (3)


arrow_upward
3
arrow_downward

В 'resources->saas->stylesheets->fonts->fontAwesome' поместите все файлы .eot, .svg, .ttf и .woff. В вашем файле app.scss включите его

// Custom font
@include icon-font('CustomIcons', inline-font-files(
'fontAwesome/fontawesome-webfont.woff', woff,
'fontAwesome/fontawesome-webfont.ttf', truetype,
'fontAwesome/fontawesome-webfont.svg', svg,
'fontAwesome/fontawesome-webfont.eot', eot
));

после

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

и включать такие значки, как @include icon("settings", '\f085', "CustomIcons"); Теперь класс «Настройки» можно использовать в iconCls для отображения http://fortawesome.github.io/Font-Awesome/icon/cogs/ значок. Н.Б. Не забудьте скомпилировать файл scss.

person Anand Gupta    schedule 12.02.2014
comment
Это работает в Sencha Touch 2, но не в Sencha Architect 3. Если я буду следовать вашим инструкциям, это не сработает. Я думаю, что Sencha Architect не использует app.scss. - person Watto; 14.02.2014

arrow_upward
1
arrow_downward

Недавно я создал это новое приложение, которое поможет вам подготовить значки и соответствующий файл SASS (_icons-myfont.scss) для ваших приложений Sencha. Это было протестировано с проектами Sencha Architect.

README объясняет шаги по созданию значков на веб-сайте Ico Moon и использованию инструмента для преобразования файлов проекта Ico Moon в SCSS для использования в Sencha Touch.

person Tony O'Hagan    schedule 25.09.2014

arrow_upward
0
arrow_downward

У меня та же проблема. Я пробовал, но не получилось. Я нашел простой способ сделать это. 1. Загрузите файл шрифта и css и поместите их во floder (например, your_architect_floder/css/) 2. импортируйте css в архитектуру как ресурсы 3. добавьте кнопку, не используйте «текст», а используйте html. "редактировать" удивительно? :-D

person lee    schedule 18.07.2014