How to add FontAwesome to Tiggzi for more custom icons

[Rutger van Dijk]

Hi All,

I am looking for a few days how to add some more icons to buttons in Tiggzi. I found a nice package: https://github.com/commadelimited/jQu... and I really want to use these icons.

I think I will be able to get it to work, the problem I now have is that I need to upload Font files. In css file there is reference to font files:

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

Does anyone know a way to upload these files to my Tiggzi project?

[Maryna Brodina]

Hello! Please try to convert all uploaded from https://github.com/commadelimited/jQu... files you need into a base64 string (for example here http://webcodertools.com/imagetobase6.... You can then upload converted files in Tiggzi editor (Create new -- CSS). Let us know if you still have any questions.

[Rutger van Dijk]

Hi Marina,

Thanks for the quick reply, I will convert them to something like and put all the long strings in css file in Tiggzy.
To be sure, I changed

src: url('font/fontawesome-webfont.eot');

into

src: url(data:application/octet-stream;base64,[big string]);

But how to change

url('font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),

How to add #FontAwesomeRegular to the base64 coded string?

[Maryna Brodina]

Hello again! This should help http://css-tricks.com/snippets/css/us...

These is options without hash:

url('webfont.woff') format('woff'), /* Modern Browsers /
url('webfont.ttf') format('truetype'), / Safari, Android, iOS */

[Rutger van Dijk]

All works fine now. Thanks for the help.

[Bachi]

Hi,
I followed your instructions over and over again without any success. Would you be kind enough to reiterate everything A to Z. I really like to have "FontAwsome" icons on to my nav bar.
Thank you,
Bachi Nyangar

[Igor]

Hi,

Please clarify what exactly doesn't work.

[Bachi]

Hi, Igor
Thanks for your respond.
Instruction to download: which part goes to which section. (CSS or JS)
What line of the text should be replaced. Marina's links at the above is no longer working. Please give me a dummy instruction like 1,2 and 3 so I can follow.
Thank you,
Bachi Nyangar

[Maryna Brodina]

Hello!
1) Create CSS
2) Download nesessary files
3) Convert font into base64 using any available online converter https://www.google.com.ua/search?q=fi... (for example http://www.opinionatedgeek.com/dotnet...)
4) add the following code in CSS
code@font-face {
font-family: 'MyWebFont';
src: url('data:application/octet-stream;base64,[string from converted file .woff]') format('woff'), /* Modern Browsers /
url('data:application/octet-stream;base64,[string from converted file .ttf]') format('truetype') / Safari, Android, iOS /
}/code
where MyWebFont - font name
code[string from converted file .]/code - string you get from converter (you have to use it without [] and spaces)
5) to apply font to any tag/class you just need to specify in CSS
codefont-family: 'MyWebFont'/code

[Bachi]

Hi, Marina
Thank you for sending step by step instruction. I did convert the base 64 files and uploaded into my appery project, however it doesn't seem completed because;

1. Unloaded icon image on UI (see attached)
2. Can't find where I can upload newly installed icons
   Thank you,
   Bachi Nyangar