How to include an external icon font in Apperyio?

[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.

   "

[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...

[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)?

[Fellrad]

Hello!

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

Best regards.

[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.