I have an issue by the way.
When I import my own icons, all the default icons are now define by the return value (for exemple for my home icon is now a big H).
I just want to add new icons, not delete the older, have you an idea to fix this ?
Hey Adrien, that’s a good question that I forgot to mention. The mixin icon-font() will load your font – @include font-face($name, $font-files, $eot) – but also reassign button and tabs default icon font.
Since Touch doesn’t know which icon is coming from which font, it will use a default, but you can override:
I am trying to get FontAwesome Working with Sencha Touch.
i downloaded the font and included as per your tutorial.
@include icon-font(‘FontAwesome’, inline-font-files(
‘FontAwesome/fontawesome-webfont.woff’, woff,
‘FontAwesome/fontawesome-webfont.ttf’, truetype,
‘FontAwesome/fontawesome-webfont.svg’, svg
));
i am confused as to how should i include the icon and use it for a button.
@include icon(“icon-reorder”,”FontAwesome”); This just puts in the icon as “icon-reorder” , How does it know what content to return? it should be returning “f0c9” as expected.
Only Picto icons have the mapping name -> key. So if you include a picto icons like this @include icon(‘home’); it knows that “home” maps to “H” (you can find the @function icon-character-for-name inside _Class.scss)
For your icons, you need to inform directly the key. In my example @include icon(“menu”, “e009”);.
This sounds like an issue with the font or the way it’s being included. The Pictos font that ships with the framework works on Android 2.2, so there’s got to be something different going on in your case.
But If you’re sure all is fine in your side, I’d suggest open a bug report on Sencha Touch Forum.
I don’t have a solution. As I mentioned, the best we can do is open a bug report on the forum, attaching the font files you generated and a test case so engineering can test this on the Android 2.2.
Great tutorial, however keep in mind that to represent a character, you have to start with a backslash followed by the hexadecimal number that represents the character’s Unicode code point value. So your code: @include icon(“menu” , “e009”, “SenchaConIcons”); should have “\e009” instead.
Hi Bruno,
I got this working in my ST 2.2 app, but after porting it to ST 2.3 custom font icons stop working :(
Now I only see the char associated to every font-icon and not the icon itself…
Have you already experienced some problem with the new framework release?
I’ve recently created this new tool that will help you to prepare icons for your Sencha Touch apps. The README explains the steps for creating icons at the Ico Moon web site and converting the Ico Moon project for use in Sencha Touch.
RT @pdehaan: Adding Custom Font Icons to #SenchaTouch 2.2 http://t.co/NWxW4weQQN by @extdesenv
Thanks ! Very useful topic !
I have an issue by the way.
When I import my own icons, all the default icons are now define by the return value (for exemple for my home icon is now a big H).
I just want to add new icons, not delete the older, have you an idea to fix this ?
Hey Adrien, that’s a good question that I forgot to mention. The mixin icon-font() will load your font – @include font-face($name, $font-files, $eot) – but also reassign button and tabs default icon font.
Since Touch doesn’t know which icon is coming from which font, it will use a default, but you can override:
@include icon('home', null, 'Pictos');or
.x-tab .x-button-icon.home:before, .x-button .x-button-icon.home:before {
font-family: 'Pictos';
}
This process will certainly get better on future versions.
Regards!
I lilaletry jumped out of my chair and danced after reading this!
Hi,
I am trying to get FontAwesome Working with Sencha Touch.
i downloaded the font and included as per your tutorial.
@include icon-font(‘FontAwesome’, inline-font-files(
‘FontAwesome/fontawesome-webfont.woff’, woff,
‘FontAwesome/fontawesome-webfont.ttf’, truetype,
‘FontAwesome/fontawesome-webfont.svg’, svg
));
i am confused as to how should i include the icon and use it for a button.
@include icon(“icon-reorder”,”FontAwesome”); This just puts in the icon as “icon-reorder” , How does it know what content to return? it should be returning “f0c9” as expected.
Please let me know where am i going wrong.
Only Picto icons have the mapping name -> key. So if you include a picto icons like this @include icon(‘home’); it knows that “home” maps to “H” (you can find the @function icon-character-for-name inside _Class.scss)
For your icons, you need to inform directly the key. In my example @include icon(“menu”, “e009”);.
Thanks Bruno !
It’s work, that’s perfect !
Regards.
Adding Custom Font Icons to #Sencha Touch 2.2 http://t.co/5f1RLYQSbw
Updated June/5: In 2.2.1 you have to specify your font along with icon() mixin. Otherwise it will fallback to ‘Pictos’
@include icon("menu" , "e009", "SenchaConIcons"); @include icon("search", "e000", "SenchaConIcons"); @include icon("star" , "e001", "SenchaConIcons");[…] http://bruno.tavares.me/theming/adding-custom-font-icons-to-sencha-touch-2-2/?lang=pt […]
I do this process, it is good in android 4 and above, but in android 2.2, images are appeared like an Chinese word.
What is problem?
This sounds like an issue with the font or the way it’s being included. The Pictos font that ships with the framework works on Android 2.2, so there’s got to be something different going on in your case.
But If you’re sure all is fine in your side, I’d suggest open a bug report on Sencha Touch Forum.
Same problem here.
The only solution I had was to use png instead.
Hi, I not really understand. Here is my sass file
@include icon-font('SenchaConIcons', inline-font-files( 'icomoon/icomoon.woff', woff, 'icomoon/icomoon.ttf', truetype, 'icomoon/icomoon.svg', svg )); @include icon("menu" , "e009", "SenchaConIcons");My tabpanel
My tabPanel { iconCls: 'menu', title: 'Setup', styleHtmlContent: true, scrollable: true, xtype: 'Setup', },But I still not able to get the icon. Any solution?
I don’t have a solution. As I mentioned, the best we can do is open a bug report on the forum, attaching the font files you generated and a test case so engineering can test this on the Android 2.2.
Here -> Touch 2 Bug Forum
By @Techtigre comment right below, add \ before the font-icon hexadecimal values. Instead
@include icon("menu" , "e009", "SenchaConIcons");Try
@include icon("menu" , "\e009", "SenchaConIcons");Great tutorial, however keep in mind that to represent a character, you have to start with a backslash followed by the hexadecimal number that represents the character’s Unicode code point value. So your code: @include icon(“menu” , “e009”, “SenchaConIcons”); should have “\e009” instead.
Good catch, my mistake… Fixed!
Posted more info about theming for devices at http://druckit.wordpress.com/2013/08/12/sencha-touch-2-theming-apps-for-multiple-devices/
can’t get this to work :-(
Do you have the source for this so i can investigate myself? Also, ‘SenchaConIcons’ is user defined right?
I don’t, it’s just snippets. And yes, SenchaConIcons is user defined. What is the error?
Nice to see u
Hi Bruno,
I got this working in my ST 2.2 app, but after porting it to ST 2.3 custom font icons stop working :(
Now I only see the char associated to every font-icon and not the icon itself…
Have you already experienced some problem with the new framework release?
Thanks,
Matteo
any fix for some fonts from icomoom that not perfectly center inside button, such as “calculate” icon ?
Hey man, Would you send me a video about this subject?
Or woff editing?
I’ve recently created this new tool that will help you to prepare icons for your Sencha Touch apps. The README explains the steps for creating icons at the Ico Moon web site and converting the Ico Moon project for use in Sencha Touch.
https://github.com/tohagan/sencha-ico-moon