Upland OL User community

Fontawsome import

#1

Hiya,

Anyone found out how to use the “fontawsome” package within COTG?
Currently getting “unsupported font-family” within the COTG app :slight_smile:.

Every modern font / icon pack uses a font file to generate the icons, however even when I add the fonts to the font folder within COTG, it still not recogizes it…

#2

The SVG version of this seems to work fine for me in the Windows COTG app at least.

In the template, I included this link as a remote JS:

https://use.fontawesome.com/releases/v5.8.1/js/all.js

Then I checked the box to “Use cached Capture OnTheGo resource”

1
Note: Font Awesome suggests using the Defer option, so this would probably be good to check as well.

For further information on supported font types in Connect, please see here: http://help.objectiflune.com/en/planetpress-connect-user-guide/2018.2/#designer/Styling_Formatting/Fonts.htm

#3

I’m using the CSS approach:

  1. Right mouse click the Stylesheets folder in the Resources panel
  2. Set the name field to: Fontawesome (value doesn’t really matter)
  3. Paste the following location in the URL field (it is referring to the Font Awesome’s CDN)
    https://use.fontawesome.com/releases/v5.7.2/css/all.css
  4. Tick the “Use cached Capture OnTheGo resource” option. This downloads the CSS file to the app only once (e.g. the CSS is not added to each form).

In your HTML you can use the following to use the icon (in this case the umbrella icon):
<i class="fas fa-umbrella"></i>

To put an icon on a button:
<button role="take-button" type="button"><i class="fa fa-camera"></i> Hello</button>

Hope this helps,

Erik

#4

Ah I missed the cached version, Downloaded every library to make sure that they were available even when there is no internet connection :-).

Anybody also know how long the caching is done?

#5

The cache headers are defined by the server hosting the files.

#6

Works like a charm! :slight_smile:
Even when I just the bootstrap framework :smiley:

#7

Indeed… Bootstrap works too. The following link contains a little Bootstrap Kitchen Sink for COTG.

https://objlune-my.sharepoint.com/:u:/g/personal/vandenheuvele_eu_objectiflune_com/EbsTygzAAIJNjbw7RKUTNeMBbGojUUQqy2AMrYYEYmRxrg?e=cbcxB5

#8

Thanks for that,
Already got my own sink for bootstrap :-).

#9

Excellent!

Question: Would it be helpful when we add Bootstrap based COTG template wizards to OL Connect Designer? In that case we prob need to create a setting to define which HTML structure to use when inserting COTG input controls via the UI (although my gut feeling tells me you are coding the forms by hand anyway).

#10

Hiya erik,

It would be nice to just select it from the GUI what CSS framework you want to use. In my case bootstrap just works better for me in a way that it is just easier for me to code in (and what I can see a little more support / plugins on the internet).

The other thing is that the current included foundation framework is the old version and not the newest version of the framework. You can easily fix it yourself however kinda annoying when browsing the docs that you need to select an older version.

(The switch inside foundation is a good example where the new version of the framework has a nice extra option the specify text inside the switch where the old version has not).

The COTG components are almost one one compatible between foundation and bootstrap. (You only need to change some classes and move around with the tag).

And you are right I am fully coding the form outside the designer and after the design process I just copy everything inside the body to COTG. :slight_smile:

#11

Erik,

I’m using Bootstrap (as I prefer to Foundation) but I’m getting the following error when the bootstrap.bundle.min.js is included in my COTG - and I’ve downloaded it; it’s not remote.

[Error in COTG application]

Please advise.

EDIT: this is resolved in the ticked linked above.