Font Awesome CDN doesn't allow kit upload icons

Should currently support it by simply using the Kit src in the "External file location" field. I.e. you can use https://kit.fontawesome.com/314b2441e7.js as the external file location.

I actually noticed a problem with the existing FA CDN just today, and luckily I was able to use the kit.fontawesome.com URL just now.

But I am looking to use something like this:
https://cdnjs.com/libraries/font-awesome/

and it isn't loading properly. I'm using the min.js URL (i.e. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js) and in the Drupal admin section, I see something like the attached screenshot.

Is there a different URL we should be using?

It is loading properly - bullhorn "regular" is only supported in the Pro version

https://fontawesome.com/icons/bullhorn?style=regular

So it renders as a ? mark here

Ohhh, and that CDN is only the free version. Makes sense; thanks!

Yes. Unfortunately I don't think there's a cut and dry method of determining which you're using (free or pro versions) or I would think we could pare the icon list down to only show valid icons

I am a Fontawesome Pro subscriber and I'm also not seeing many of the icons in the auto complete widget. I have tried using both webfonts and svg and provided the necessary external kit url. Further more when I provide one of the valid icons I just get an error message of "Invalid icon name [MISSING-ICON-NAME-HERE]. Please see the Font Awesome icon list for correct icon names." on save.

Is "full" pro support on the road map? I'm also happy to help push this task forward as well as I have time.

is there any work being done on this?
We have the pro version, are using the external cdn
icons we have in our kit only work on the page, but we can't add them via the picker.

the icon code is <i class="fak fa-our-custom-icon"></i>

I assume that the fak part is messing it up. I found in the IconManagerService that there were "brands" being set...

 /**
   * Get icons.
   *
   * @return array
   *   List of all icons.
   */
  public function getIcons() {
    $icons = [];
    $iconData = $this->fontAwesomeManager->getIcons();
    $classes = [];

    foreach ($iconData as $icon => $data) {
      foreach ($iconData[$icon]['styles'] as $style) {
        switch ($style) {
          case 'brands':
            $iconPrefix = 'fab';
            break;

          case 'light':
            $iconPrefix = 'fal';
            break;

          case 'regular':
            $iconPrefix = 'far';
            break;

          case 'duotone':
            $iconPrefix = 'fad';
            break;

          case 'custom':
            $iconPrefix = 'fak';
            break;

          default:
          case 'solid':
            $iconPrefix = 'fas';
            break;
        }
        $classes[$icon][] = $iconPrefix . ' fa-' . $icon;
      }
      $icons[] = [
        'name' => $iconData[$icon]['name'],
        'search_terms' => $iconData[$icon]['search_terms'],
        'classes' => $classes[$icon],
      ];
    }

    return $icons;
  }

obviously would love to alter this rather than hack it... but could you tell me if we are even close to being in the correct place for adding our custom icons to the picker?

I am attaching a patch which should allow for you to select custom icons with "Kit Uploads" as the icon type. This will not fill in the auto-complete as the list of your custom icons is not available to the module, but this should allow you to manually type them in. Could you test and let me know?

I am still seeing invalid icon for the field
the patch applied cleanly.

I think in modules/contrib/fontawesome/src/Controller/AutocompleteController.phpAutocompleteController.php

case 'kit_uploads':
                $iconPrefix = 'fad';
                break;

needs to be

case 'kit_uploads':
                $iconPrefix = 'fak';
                break;

but i put that in place and it still won't save with same message.

I'm not sure but is the validation not honoring the new kit-upload meta?

/**
   * Validate the Font Awesome icon name.
   */
  public static function validateIconName($element, FormStateInterface $form_state) {
    $value = $element['#value'];
    if (strlen($value) == 0) {
      $form_state->setValueForElement($element, '');
      return;
    }

    // Remove the prefix if the user accidentally added it.
    if (substr($value, 0, 3) == 'fa-') {
      $value = substr($value, 3);
    }

    // Load the icon data so we can check for a valid icon.
    $iconData = \Drupal::service('fontawesome.font_awesome_manager')->getIconMetadata($value);

    if (!isset($iconData['name'])) {
      $form_state->setError($element, t("Invalid icon name %value. Please see @iconLink for correct icon names.", [
        '%value' => $value,
        '@iconLink' => Link::fromTextAndUrl(t('the Font Awesome icon list'), Url::fromUri('https://fontawesome.com/icons'))->toString(),
      ]));
    }
  }

I see. Attaching another patch which provides a setting to allow validation bypass. I think this is the only way to deal with custom icon names since we can't pull them from the metadata files. Try this and let me know if it works for you after you turn on the bypass in Font Awesome settings.

Good catch on the 'fak' line and on the additional validation in the editor dialog. New patch attached.

Hey man thanks a ton for all of the quick responses.
Unfortunately, composer won't apply the latest patch you rolled.

Gathering patches for dependencies. This might take a minute.
  - Installing drupal/fontawesome (2.18.0): Extracting archive
  - Applying patches for drupal/fontawesome
    https://www.drupal.org/files/issues/2021-03-16/3064863-allow_kit_uploads-14.patch (Allow us to use kits in the autocomplete field)
   Could not apply patch! Skipping. The error was: Cannot apply patch https://www.drupal.org/files/issues/2021-03-16/3064863-allow_kit_uploads-14.patch

I think it's borking at this:

diff --git a/src/FontAwesomeManager.php b/src/FontAwesomeManager.php
index 5b726d4..30ad567 100644
--- a/src/FontAwesomeManager.php
+++ b/src/FontAwesomeManager.php
@@ -29,7 +29,7 @@ class FontAwesomeManager implements FontAwesomeManagerInterface {
   protected $moduleHandler;
 
   /**
-   * The theme handler
+   * The theme handler.
    *
    * @var \Drupal\Core\Extension\ThemeHandlerInterface
    */

https://www.drupal.org/files/issues/2021-03-16/3064863-allow_kit_uploads... applies clean against dev. my bad, duh. ;)
However, still having a problem using the Kit Uploads style. It won't save the selection when i submit the widget.

Can you provide steps to repeat? I can't duplicate the issue

Sure,

I have added a field to a custom block type.
I have clicked the bypass validation button
i paste in the text "our-custom-icon" in the autocomplete field
I open the ADDITIONAL FONT AWESOME SETTINGS field set
I choose Kit Uploads from the Style options
I hit save...
Then i see that the icon does not appear correctly.
Upon inspection of the icon code, i see that it tries to set "fas" as the data-prefix (svg) or class (webfont)
So i edit the block again and see that the Kit Uploads style is not preserved and it has been set back to Solid

Thanks - tracked it down. The icon setting was being massaged to "fas" when it wasn't found in the metadata, which obviously "fak" would not be.

Tested and I think this patch resolves the issue - let me know.

That got it! this is now working with kits uploads. Thanks for all your work on this i think it will really be a nice addition for the module.

Thanks for all the work on this!