Question

我已经使用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项目中的最佳方法吗？

谢谢大家。

Answer 1

在'resources-＆gt; saas-＆gt; stylesheets-＆gt; fonts-＆gt; 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中使用'settings'类来显示http://fortawesome.github.io/Font-Awesome/icon/cogs/图标。注：不要忘记编译scss文件。

Answer 2

我有同样的问题。我尝试了，但失败了。我找到了一个简单的方法来实现它。 1.下载字体文件和css，并将它们放入floder（如your_architect_floder / css /） 2.将架构师中的css导入为资源 3.添加一个按钮，不要使用＆＃34; text＆＃34;，但使用html。＆＃39;编辑＆＃39; 惊人？ :-D

Answer 3

我最近创建了这个新应用，可帮助您为Sencha应用准备图标和相应的SASS文件（_icons-myfont.scss）。这已经通过Sencha Architect项目进行了测试。

README解释了在Ico Moon网站上创建图标的步骤，并使用该工具将Ico Moon项目文件转换为SCSS，以便在Sencha Touch中使用。

https://github.com/tohagan/sencha-ico-moon

如何添加像FontAwesome这样的新图标字体？

3 个答案: