I've been using Sencha Touch for a long time and now I'm trying Sencha Architect. I need to include FontAwesome to use more icons in my buttons. The problem is that I don't know where I have to write:
#include icon-font('Awesome', inline-font-files('awesome/fontawesome-webfont.woff', woff, 'awesome/fontawesome-webfont.ttf', truetype,'awesome/fontawesome-webfont.svg', svg));
Besides, I'm not sure which is the folder where the fonts has to be located. If I put the fonts in resources/scss/stylesheets/fonts/awesome, the compiler throws some errors. If I put the fonts in Library/Application Support/Sencha/Sencha Architect 3.0/extracted/touch23-compile/themes/fonts, it works, but I don't think this is the best solution.
Does anybody know the best way to include new fonts to a Sencha Architect project?
Thank you all.
In 'resources->saas->stylesheets->fonts->fontAwesome' put all the .eot, .svg, .ttf and .woff files.
In your app.scss file include it
// 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
));
after
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
and include icons likes #include icon("settings", '\f085', "CustomIcons");
Now 'settings' class can be used in iconCls to show the http://fortawesome.github.io/Font-Awesome/icon/cogs/ icon.
N.B. Don't forget to compile the scss file.
I've recently created this new app that will help you to prepare an icons and corresponding SASS file (_icons-myfont.scss) for your Sencha apps. This has been tested with Sencha Architect projects.
The README explains the steps for creating icons at the Ico Moon web site and using the tool to convert Ico Moon project files into SCSS for use in Sencha Touch.
https://github.com/tohagan/sencha-ico-moon
I have the same problem.
I try it,but failed.I found a easy way to make it.
1. download the font file and css,and put them into floder (like your_architect_floder/css/)
2. import the css in the architect as resources
3. add a button ,dont use "text",but use the html.
'edit'
amazing ?
:-D
Related
I have been surfing through the sites looking for a way to add my custom css font icons for my own application.
I have uploaded the css file in the workspace static files, and put the url in Shared Components\ Themes \ Icons \ Custom Library File URLs.
Please show my how to used my custom css font icons, for I don't want to upload images or so.
Depends on your version, but Maxime has an example here describing how to import Font APEX library for APEX 5.0
http://max-tremblay.blogspot.com.au/2017/02/using-font-apex-in-apex-50.html
You're chasing attributes in the theme settings.
Fonts like Wingdings render letters as a variety of symbols. If you look at some font websites likes dafont, you can see a lot of symbol fonts. Download the font file (ttf) and convert it to woff using some converter tool / websites like convertio. You may refer this stackoverflow question to get an idea about its usage in CSS.
Hope this helps.
In a project with the Meteor javascript framework, I'm using Fontawesome to display my icons.
I want to add my custom icons to FontAwesome. Looking around, I understand that IcoMoon is exactly the tool I need.
But I don't understand how I can add an icon taken in IcoMoon to FontAwesome.
Can someone help me :)
Thanks
This is not a meteor question, but an icomoon question. The answer is that you don't add an icomoon set to font-awesome, rather you let them run together side by side.
What is meteor specific is how you can access those fonts, so they will need to be in your /public/directory.
You can find an example of this through my meteor starter set. You would put your extracted icomoon fonts inside of that /assets/ directory. Then inside of /client/less/ (or sass if you use that) you would put your icomoon file as an import. Finally from your main less file you would import the file like #import "/less/icomoon.import.less"; at the top of your document.
We have Lean Symbol ttf file. We want to use that in our application. We have added that one in our application but don't know how to use it. Like other i.e. glyphicons ttf we use class for accessing its icon representation etc. How I can do w/ this?
We have LeanSymbol.ttf file. When I open it by double click I get this one http://snag.gy/Rwi9Q.jpg
We want use these icon in our application but don't know how to access that icons.
Go to ForntSquirrel's web font generator.
Upload your font.
Download your kit.
The zip that you download has all the fonts in web format and gives you some great examples of how to use them.
You might want to consider using font awesome, which is awesome.
Bootstrap also includes Glyphicons as one of their components.
Use something like font squirrel to convert the font into a web font. You can then add the generated font-face css to your stylesheet.
I uploaded the files to my server but I'm only using 5 icons in my site.
How can I delete the Font Awesome icons that I will never use? Like the useful and beautiful Stethoscope.
http://fortawesome.github.io/Font-Awesome/icon/stethoscope/
Thank you
It sounds like you copied the entire font-awesome directory into your project, and this isn't the result you are looking for. If you only want 5 of the Font Awesome icons in your project, and not have the balance of icons available for future use, take a look at Fontello.
Fontello is an icon fonts generator which allows you to pick and choose only the icon fonts you want for your project.
Here's a link to Fontello on GitHub, with information on how to use it:
https://github.com/fontello/fontello/wiki/Help
Another option you have if you only need a few icons, it's IcoMoon where you can choose the icons that are going to be loaded only including the ones from Font-Awesome.
Otherwise, check this blog that explains how to reduce font-awesome size.
If you are using javascript module imports try:
import { faCoffee } from '#fortawesome/free-solid-svg-icons/faCoffee' // <-- note the extra faCoffee there
I am trying to include Zurb Icon Fonts 3 into my Moovweb project. First off, is it supported? Second, what do I have to do to get them to work. I have tried a few different combinations of importing them, but each time it brings up a blank local host page.
Thank you in advance.
One way to do this is to create a fonts folder under the assets/images folder where you would place the foundation fonts.
Then you would include the foundation-icons.scss file in the stylesheets folder, but rename it so it's a partial: _foundation-icons.scss
Edit the references in _foundation-icons.scss so they point to image-url("fonts/foundation-icons.ttf"), etc.
Then you can #import "_foundation-icons.scss"; so the styles get compiled in your main stylesheet.