Different clock fa icon in two apps

Help Center Get Answers
1

I have two apps that I have added the clock icon (fa-clock-o) as an action link. In both apps in builder, the time on the clock is set to the 9:00 position with transparent clock face background. In one of the apps when viewed in our actual app, the clock is set to 4:00 position with a filled clock face while the other app maintains the 9:00 setting with transparent background.

I can’t figure out why one clock is set to 9:00 with transparent clock face and the other is set to 4:00 with a filled clock face.

For appearance reasons, I prefer the clock set to 4:00 with the filled face background.

I’ve tried adding new action links using the clock icon to both apps and have the same result. App with 9:00 clock, has transparent clock face, app with 4:00 clock, has filled clock face regardless of how many clock icons I add to app.

Any and all help would be appreciated…

2

@Jon1 is it possible that there is some JavaScript in one of your apps that is importing a later version of Font Awesome?

3

Hey Stephen, that you for the response. I guess my question would be, how do I get the earlier version of Font Awesome? Is there the ability to have both or can I some how add fa icons and use them with Knack app?

4

@Jon1 If you are importing the newer version in your JS, it should overwrite the Knack-native version, so you won’t be able to maintain both versions within the same app.

5

Hey Stephen, not sure of which version of Font Awesome my apps have but I’m pretty sure it’s NOT the newest versions and I’d like to utilize the newest version of Font Awesome in my apps.

Can you please tell me how this can be done? Is there a script that I can add ?

6

Hey @Jon1, you will need to set up a Font Awesome account, create a new kit, and get the unique embed code:

image
image1162×394 27.1 KB

You can then load it from the Knack JavaScript section with something like this:

KnackInitAsync = function ($, callback) {
  // REQUIRED: Explicitly include jQuery
  window.$ = $;
  // Load the file from wherever it is hosted
  LazyLoad.js(['https://kit.fontawesome.com/{INSERT UNIQUE CODE HERE}.js'], function () {
    console.log('Loaded external files!');
    // REQUIRED: Tell the Knack app to go ahead and finish loading
    callback();
  });
};

This should automatically update any existing icons to the newer set.
You will not be able to add any of the newer icons natively in the Builder, but you can insert them in text fields (that will render in the live app) like so: <i class="fa-solid fa-user-gear"></i> (using fa-user-gear as example).

7

Thank you sir for the solution… JON