Page 1 of 1

How to include an external icon font in Apperyio?

Posted: Mon Apr 27, 2015 2:27 pm
by Fellrad

Hi there! I would like to install an external font that can be used to display icons, "font awesome".

On their homepage they describe two possibilities to install the font, however, I do not understand how to "translate" the instructions for use in Appery. Can you help me by telling me how I could implement the following in Apperyio? Thank you.

First possibility:

"
Paste the following code into the section of your site's HTML.

"

Second possibility:

"
1.Copy the entire font-awesome directory into your project.

  1. In the of your html, reference the location to your font-awesome.min.css.

    "


How to include an external icon font in Apperyio?

Posted: Tue Apr 28, 2015 5:14 am
by Serhii Kulibaba

Hello,

  1. Add to your page HTML component: https://devcenter.appery.io/documenta...

  2. Upload your font file to the project directory: https://devcenter.appery.io/tutorials...


How to include an external icon font in Apperyio?

Posted: Tue Apr 28, 2015 8:18 am
by Fellrad

Hi!

Thank you for the answer. There were two words missing ('HEAD') in my first post - sorry for that. I should mean:

First possibility:
"
Paste the following code into the HEAD section of your site's HTML.
"

Second possibility:
"
1.Copy the entire font-awesome directory into your project.

  1. In the HEAD of your html, reference the location to your font-awesome.min.css.
    "

    So, my question actually is: How can I add to the HEAD of the HTML file (not just to the body as with the HTML-component)?


How to include an external icon font in Apperyio?

Posted: Tue Apr 28, 2015 9:32 am
by Fellrad

Hello!

I guess it's the file, "Startscreen.html" in the WEB_RESOURCES folder, am I right?

Best regards.


How to include an external icon font in Apperyio?

Posted: Thu Apr 30, 2015 1:49 am
by Yurii Orishchuk

Hello,

Here is a solution to to add custom font to your app:

  1. Open Source tab.
    Details: http://prntscr.com/6iwif7/direct

  2. Open WEB_RESOURCES folder.

  3. Create there "files" subfolder.
    http://prntscr.com/6iwnea/direct

  4. Upload your font file with name: "customFont.ttf"
    Details: http://prntscr.com/6iwst7/direct

  5. Create new CSS file and populate it with following CSS:

    pre

    @font-face {
    font-family: "myCystomFont";
    src: url("../../../../files/customFont.ttf");
    }

    body, label{
    font-family: "myCystomFont"
    }

    /pre

    Details: http://prntscr.com/6iwvpj/direct

    Then after you include custom font correctly you can use it in accordance to this font documentation.

    Ragards.