CLOSED: problem with js rendered fontawesome icons. about iconpicker

[Volmarg]

I'm not saying that this has to be fixed or something - just saying that there other ppl might have problem with this as well, but well it's just webpack particullary breaking alot scripts (like it took me few hours to setup tinymce with it);

[Volmarg]

Now, information about the fontawesome package for upper bug:

• Font Awesome Free 5.8.2 by @FontAwesome - https://fontawesome.com
• License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)

My workaround:

• Using json files for fontawesome 5.0 from
• https://gist.github.com/zwinnie
• Creating my set:

{
  "icons": [

    "far fa-arrows",
    "far fa-arrows-h",
    "far fa-arrows-v",


    "far fa-cloud-download",
    "far fa-cloud-upload",

    "far fa-diamond",
    "far fa-exchange",
    "far fa-external-link",
    "far fa-external-link-square",

    "far fa-level-down",
    "far fa-level-up",

    "far fa-long-arrow-down",
    "far fa-long-arrow-left",
    "far fa-long-arrow-right",
    "far fa-long-arrow-up",

    "far fa-money-bill",

    "far fa-pencil",

    "far fa-repeat",

    "far fa-shield",
    "far fa-sign-in",
    "far fa-sign-out",

    "far fa-tachometer",
    "far fa-ticket",

    "far fa-user-alt",

    "far fa-500px",

    "far fa-address-book",
    "far fa-address-card",
    "far fa-adjust",
    "far fa-adn",

    "far fa-align-center",
    "far fa-align-justify",
    "far fa-align-left",
    "far fa-align-right",
    "far fa-amazon",
    "far fa-amazon-pay",
    "far fa-ambulance",
    "far fa-american-sign-language-interpreting",

    "far fa-anchor",
    "far fa-android",
    "far fa-angellist",
    "far fa-angle-double-down",
    "far fa-angle-double-left",
    "far fa-angle-double-right",
    "far fa-angle-double-up",
    "far fa-angle-down",
    "far fa-angle-left",
    "far fa-angle-right",
    "far fa-angle-up",

    "far fa-angular",

    "far fa-apple",
    "far fa-apple-pay",
    "far fa-archive",

    "far fa-arrow-circle-down",
    "far fa-arrow-circle-left",
    "far fa-arrow-circle-right",
    "far fa-arrow-circle-up",
    "far fa-arrow-down",
    "far fa-arrow-left",
    "far fa-arrow-right",
    "far fa-arrow-up",
    "far fa-arrows-alt",
    "far fa-assistive-listening-systems",
    "far fa-asterisk",
    "far fa-at",
    "far fa-audio-description",
    "far fa-autoprefixer",
    "far fa-aviato",
    "far fa-backward",
    "far fa-balance-scale",
    "far fa-ban",
    "far fa-bandcamp",
    "far fa-barcode",
    "far fa-bars",
    "far fa-bath",
    "far fa-battery-empty",
    "far fa-battery-full",
    "far fa-battery-half",
    "far fa-battery-quarter",
    "far fa-battery-three-quarters",
    "far fa-bed",
    "far fa-beer",
    "far fa-behance",
    "far fa-behance-square",
    "far fa-bell",
    "far fa-bell-slash",
    "far fa-bicycle",
    "far fa-binoculars",
    "far fa-birthday-cake",
    "far fa-bitbucket",
    "far fa-black-tie",
    "far fa-blind",
    "far fa-bluetooth",
    "far fa-bluetooth-b",
    "far fa-bold",
    "far fa-bolt",
    "far fa-bomb",
    "far fa-book",
    "far fa-bookmark",
    "far fa-braille",
    "far fa-briefcase",
    "far fa-btc",
    "far fa-bug",
    "far fa-building",
    "far fa-bullhorn",
    "far fa-bullseye",
    "far fa-bus",
    "far fa-buysellads",
    "far fa-calculator",
    "far fa-calendar",
    "far fa-calendar-alt",
    "far fa-calendar-check",
    "far fa-calendar-minus",
    "far fa-calendar-plus",
    "far fa-calendar-times",
    "far fa-camera",
    "far fa-camera-retro",
    "far fa-car",
    "far fa-caret-down",
    "far fa-caret-left",
    "far fa-caret-right",
    "far fa-caret-square-down",
    "far fa-caret-square-left",
    "far fa-caret-square-right",
    "far fa-caret-square-up",
    "far fa-caret-up",
    "far fa-cart-arrow-down",
    "far fa-cart-plus",
    "far fa-cc-amazon-pay",
    "far fa-cc-amex",
    "far fa-cc-apple-pay",
    "far fa-cc-diners-club",
    "far fa-cc-discover",
    "far fa-cc-jcb",
    "far fa-cc-mastercard",
    "far fa-cc-paypal",
    "far fa-cc-stripe",
    "far fa-cc-visa",
    "far fa-certificate",
    "far fa-chart-area",
    "far fa-chart-bar",
    "far fa-chart-line",
    "far fa-chart-pie",
    "far fa-check",
    "far fa-check-circle",
    "far fa-check-square",
    "far fa-chevron-circle-down",
    "far fa-chevron-circle-left",
    "far fa-chevron-circle-right",
    "far fa-chevron-circle-up",
    "far fa-chevron-down",
    "far fa-chevron-left",
    "far fa-chevron-right",
    "far fa-chevron-up",
    "far fa-child",
    "far fa-chrome",
    "far fa-circle",
    "far fa-circle-notch",
    "far fa-clock",
    "far fa-clone",
    "far fa-closed-captioning",
    "far fa-cloud",
    "far fa-code",
    "far fa-code-branch",
    "far fa-codepen",
    "far fa-codiepie",
    "far fa-coffee",
    "far fa-cog",
    "far fa-cogs",
    "far fa-columns",
    "far fa-comment",
    "far fa-comment-alt",
    "far fa-comments",
    "far fa-compass",
    "far fa-compress",
    "far fa-connectdevelop",
    "far fa-contao",
    "far fa-copy",
    "far fa-copyright",
    "far fa-creative-commons",
    "far fa-credit-card",
    "far fa-crop",
    "far fa-crosshairs",
    "far fa-css3",
    "far fa-cube",
    "far fa-cubes",
    "far fa-cut",
    "far fa-dashcube",
    "far fa-database",
    "far fa-deaf",
    "far fa-delicious",
    "far fa-desktop",
    "far fa-deviantart",
    "far fa-digg",
    "far fa-dollar-sign",
    "far fa-dot-circle",
    "far fa-download",
    "far fa-dribbble",
    "far fa-dropbox",
    "far fa-drupal",
    "far fa-edge",
    "far fa-edit",
    "far fa-eject",
    "far fa-ellipsis-h",
    "far fa-ellipsis-v",
    "far fa-ember",
    "far fa-empire",
    "far fa-envelope",
    "far fa-envelope-open",
    "far fa-envelope-square",
    "far fa-envira",
    "far fa-eraser",
    "far fa-ethereum",
    "far fa-etsy",
    "far fa-euro-sign",
    "far fa-exclamation",
    "far fa-exclamation-circle",
    "far fa-exclamation-triangle",
    "far fa-expand",
    "far fa-expeditedssl",
    "far fa-eye",
    "far fa-eye-dropper",
    "far fa-eye-slash",
    "far fa-facebook",
    "far fa-facebook-square",
    "far fa-fast-backward",
    "far fa-fast-forward",
    "far fa-fax",
    "far fa-female",
    "far fa-fighter-jet",
    "far fa-file",
    "far fa-file-alt",
    "far fa-file-archive",
    "far fa-file-audio",
    "far fa-file-code",
    "far fa-file-excel",
    "far fa-file-image",
    "far fa-file-pdf",
    "far fa-file-powerpoint",
    "far fa-file-video",
    "far fa-file-word",
    "far fa-film",
    "far fa-filter",
    "far fa-fire",
    "far fa-fire-extinguisher",
    "far fa-firefox",
    "far fa-first-order",
    "far fa-flag",
    "far fa-flag-checkered",
    "far fa-flask",
    "far fa-flickr",
    "far fa-fly",
    "far fa-folder",
    "far fa-folder-open",
    "far fa-font",
    "far fa-font-awesome",
    "far fa-font-awesome-flag",
    "far fa-fonticons",
    "far fa-fort-awesome",
    "far fa-forumbee",
    "far fa-forward",
    "far fa-foursquare",
    "far fa-free-code-camp",
    "far fa-frown",
    "far fa-futbol",
    "far fa-gamepad",
    "far fa-gavel",
    "far fa-genderless",
    "far fa-get-pocket",
    "far fa-gg",
    "far fa-gg-circle",
    "far fa-gift",
    "far fa-git",
    "far fa-git-square",
    "far fa-github",
    "far fa-github-alt",
    "far fa-github-square",
    "far fa-gitlab",
    "far fa-gitter",
    "far fa-glass-martini",
    "far fa-glide",
    "far fa-glide-g",
    "far fa-globe",
    "far fa-google",
    "far fa-google-plus",
    "far fa-google-plus-g",
    "far fa-google-plus-square",
    "far fa-google-wallet",
    "far fa-graduation-cap",
    "far fa-gratipay",
    "far fa-grav",
    "far fa-h-square",
    "far fa-hacker-news",
    "far fa-hand-lizard",
    "far fa-hand-paper",
    "far fa-hand-peace",
    "far fa-hand-point-down",
    "far fa-hand-point-left",
    "far fa-hand-point-right",
    "far fa-hand-point-up",
    "far fa-hand-pointer",
    "far fa-hand-rock",
    "far fa-hand-scissors",
    "far fa-hand-spock",
    "far fa-handshake",
    "far fa-hashtag",
    "far fa-hdd",
    "far fa-heading",
    "far fa-headphones",
    "far fa-heart",
    "far fa-heartbeat",
    "far fa-history",
    "far fa-home",
    "far fa-hospital",
    "far fa-hourglass",
    "far fa-hourglass-end",
    "far fa-hourglass-half",
    "far fa-hourglass-start",
    "far fa-houzz",
    "far fa-html5",
    "far fa-i-cursor",
    "far fa-id-badge",
    "far fa-id-card",
    "far fa-image",
    "far fa-imdb",
    "far fa-inbox",
    "far fa-indent",
    "far fa-industry",
    "far fa-info",
    "far fa-info-circle",
    "far fa-instagram",
    "far fa-internet-explorer",
    "far fa-ioxhost",
    "far fa-italic",
    "far fa-joomla",
    "far fa-jsfiddle",
    "far fa-key",
    "far fa-keyboard",
    "far fa-korvue",
    "far fa-language",
    "far fa-laptop",
    "far fa-lastfm",
    "far fa-lastfm-square",
    "far fa-leaf",
    "far fa-leanpub",
    "far fa-lemon",
    "far fa-life-ring",
    "far fa-lightbulb",
    "far fa-link",
    "far fa-linkedin",
    "far fa-linkedin-in",
    "far fa-linode",
    "far fa-linux",
    "far fa-lira-sign",
    "far fa-list",
    "far fa-list-alt",
    "far fa-list-ol",
    "far fa-list-ul",
    "far fa-location-arrow",
    "far fa-lock",
    "far fa-low-vision",
    "far fa-magic",
    "far fa-magnet",
    "far fa-male",
    "far fa-map",
    "far fa-map-marker",
    "far fa-map-pin",
    "far fa-map-signs",
    "far fa-mars",
    "far fa-mars-double",
    "far fa-mars-stroke",
    "far fa-mars-stroke-h",
    "far fa-mars-stroke-v",
    "far fa-maxcdn",
    "far fa-medium",
    "far fa-medkit",
    "far fa-meetup",
    "far fa-meh",
    "far fa-mercury",
    "far fa-microchip",
    "far fa-microphone",
    "far fa-microphone-slash",
    "far fa-minus",
    "far fa-minus-circle",
    "far fa-minus-square",
    "far fa-mixcloud",
    "far fa-mobile",
    "far fa-modx",
    "far fa-moon",
    "far fa-motorcycle",
    "far fa-mouse-pointer",
    "far fa-music",
    "far fa-neuter",
    "far fa-newspaper",
    "far fa-nintendo-switch",
    "far fa-node",
    "far fa-object-group",
    "far fa-object-ungroup",
    "far fa-odnoklassniki",
    "far fa-odnoklassniki-square",
    "far fa-opencart",
    "far fa-openid",
    "far fa-opera",
    "far fa-optin-monster",
    "far fa-osi",
    "far fa-outdent",
    "far fa-pagelines",
    "far fa-paint-brush",
    "far fa-paper-plane",
    "far fa-paperclip",
    "far fa-paragraph",
    "far fa-paste",
    "far fa-pause",
    "far fa-pause-circle",
    "far fa-paw",
    "far fa-paypal",
    "far fa-pen-square",
    "far fa-percent",
    "far fa-phone",
    "far fa-phone-square",
    "far fa-phone-volume",
    "far fa-pied-piper",
    "far fa-pied-piper-alt",
    "far fa-pied-piper-pp",
    "far fa-pinterest",
    "far fa-pinterest-p",
    "far fa-pinterest-square",
    "far fa-plane",
    "far fa-play",
    "far fa-play-circle",
    "far fa-plug",
    "far fa-plus",
    "far fa-plus-circle",
    "far fa-plus-square",
    "far fa-podcast",
    "far fa-pound-sign",
    "far fa-power-off",
    "far fa-print",
    "far fa-product-hunt",
    "far fa-puzzle-piece",
    "far fa-qq",
    "far fa-qrcode",
    "far fa-question",
    "far fa-question-circle",
    "far fa-quora",
    "far fa-quote-left",
    "far fa-quote-right",
    "far fa-random",
    "far fa-ravelry",
    "far fa-react",
    "far fa-rebel",
    "far fa-recycle",
    "far fa-reddit",
    "far fa-reddit-alien",
    "far fa-reddit-square",
    "far fa-redo",
    "far fa-registered",
    "far fa-renren",
    "far fa-reply-all",
    "far fa-retweet",
    "far fa-road",
    "far fa-rocket",
    "far fa-rss",
    "far fa-rss-square",
    "far fa-ruble-sign",
    "far fa-rupee-sign",
    "far fa-safari",
    "far fa-sass",
    "far fa-save",
    "far fa-scribd",
    "far fa-search",
    "far fa-search-minus",
    "far fa-search-plus",
    "far fa-sellcast",
    "far fa-sellsy",
    "far fa-server",
    "far fa-share",
    "far fa-share-alt",
    "far fa-share-alt-square",
    "far fa-share-square",
    "far fa-shekel-sign",
    "far fa-ship",
    "far fa-shirtsinbulk",
    "far fa-shopping-bag",
    "far fa-shopping-basket",
    "far fa-shopping-cart",
    "far fa-shower",
    "far fa-sign-language",
    "far fa-signal",
    "far fa-simplybuilt",
    "far fa-sitemap",
    "far fa-skyatlas",
    "far fa-skype",
    "far fa-slack",
    "far fa-sliders-h",
    "far fa-slideshare",
    "far fa-smile",
    "far fa-snapchat",
    "far fa-snapchat-ghost",
    "far fa-snapchat-square",
    "far fa-snowflake",
    "far fa-sort",
    "far fa-sort-alpha-down",
    "far fa-sort-alpha-up",
    "far fa-sort-amount-down",
    "far fa-sort-amount-up",
    "far fa-sort-down",
    "far fa-sort-numeric-down",
    "far fa-sort-numeric-up",
    "far fa-sort-up",
    "far fa-soundcloud",
    "far fa-space-shuttle",
    "far fa-spinner",
    "far fa-spotify",
    "far fa-square",
    "far fa-stack-exchange",
    "far fa-stack-overflow",
    "far fa-star",
    "far fa-star-half",
    "far fa-steam",
    "far fa-steam-square",
    "far fa-step-backward",
    "far fa-step-forward",
    "far fa-stethoscope",
    "far fa-sticky-note",
    "far fa-stop",
    "far fa-stop-circle",
    "far fa-strava",
    "far fa-street-view",
    "far fa-strikethrough",
    "far fa-stripe",
    "far fa-stripe-s",
    "far fa-stumbleupon",
    "far fa-stumbleupon-circle",
    "far fa-subscript",
    "far fa-subway",
    "far fa-suitcase",
    "far fa-sun",
    "far fa-superpowers",
    "far fa-superscript",
    "far fa-sync",
    "far fa-table",
    "far fa-tablet",
    "far fa-tag",
    "far fa-tags",
    "far fa-tasks",
    "far fa-taxi",
    "far fa-telegram",
    "far fa-tencent-weibo",
    "far fa-terminal",
    "far fa-text-height",
    "far fa-text-width",
    "far fa-th",
    "far fa-th-large",
    "far fa-th-list",
    "far fa-themeisle",
    "far fa-thermometer-empty",
    "far fa-thermometer-full",
    "far fa-thermometer-half",
    "far fa-thermometer-quarter",
    "far fa-thermometer-three-quarters",
    "far fa-thumbs-down",
    "far fa-thumbs-up",
    "far fa-thumbtack",
    "far fa-times",
    "far fa-times-circle",
    "far fa-tint",
    "far fa-toggle-off",
    "far fa-toggle-on",
    "far fa-trademark",
    "far fa-train",
    "far fa-transgender",
    "far fa-transgender-alt",
    "far fa-trash",
    "far fa-tree",
    "far fa-trello",
    "far fa-tripadvisor",
    "far fa-trophy",
    "far fa-truck",
    "far fa-tty",
    "far fa-tumblr",
    "far fa-tumblr-square",
    "far fa-tv",
    "far fa-twitch",
    "far fa-twitter",
    "far fa-twitter-square",
    "far fa-typo3",
    "far fa-uber",
    "far fa-uikit",
    "far fa-umbrella",
    "far fa-underline",
    "far fa-undo",
    "far fa-uniregistry",
    "far fa-universal-access",
    "far fa-university",
    "far fa-unlink",
    "far fa-unlock",
    "far fa-unlock-alt",
    "far fa-untappd",
    "far fa-upload",
    "far fa-usb",
    "far fa-user",
    "far fa-user-circle",
    "far fa-user-md",
    "far fa-user-plus",
    "far fa-user-secret",
    "far fa-user-times",
    "far fa-users",
    "far fa-ussunnah",
    "far fa-venus",
    "far fa-venus-double",
    "far fa-venus-mars",
    "far fa-viacoin",
    "far fa-viadeo",
    "far fa-viadeo-square",
    "far fa-viber",
    "far fa-video",
    "far fa-vimeo",
    "far fa-vimeo-square",
    "far fa-vimeo-v",
    "far fa-vine",
    "far fa-vk",
    "far fa-vnv",
    "far fa-volume-down",
    "far fa-volume-off",
    "far fa-volume-up",
    "far fa-vuejs",
    "far fa-weibo",
    "far fa-weixin",
    "far fa-whatsapp",
    "far fa-whatsapp-square",
    "far fa-wheelchair",
    "far fa-whmcs",
    "far fa-wifi",
    "far fa-wikipedia-w",
    "far fa-window-close",
    "far fa-window-maximize",
    "far fa-window-minimize",
    "far fa-window-restore",
    "far fa-windows",
    "far fa-won-sign",
    "far fa-wordpress",
    "far fa-wordpress-simple",
    "far fa-wpbeginner",
    "far fa-wpexplorer",
    "far fa-wpforms",
    "far fa-wrench",
    "far fa-xbox",
    "far fa-xing",
    "far fa-xing-square",
    "far fa-y-combinator",
    "far fa-yahoo",
    "far fa-yandex",
    "far fa-yandex-international",
    "far fa-yelp",
    "far fa-yen-sign",
    "far fa-yoast",
    "far fa-youtube"
  ]
}

Added for myself small change in:

        function appendIconListJavascript(data, buttonShowAll, buttonCancel, searchPlaceholder, inputElement, previewElement) {

            // data
            var jsonData = JSON.parse(data)['icons'];

• This reduces my icons set to 650 but that's fine for me

[Volmarg]

No, no it's fine - works as intended. Just saying that in some special case of fontawesome usage it breaks down. But I handled it with my custom json so it's all ok and does it's job - thanks.

Hopefully there won't be any more suprises. :)

[furcan]

Hello again,

Thanks for your detailed feedback.

Firstly the IconPicker is a simple plugin, and developed to get only FontAwesome icons class names easily, and add that on HTML forms.

General purpose of the IconPicker is using it on websites admin panels or etc.
For example: Dynamic pages, Dynamic Modules, or Dynamic Users forms etc.

And the form data can also be used on websites(front-end). A simple example of use is below.

For Example:

<div class="an-example-module">
<i class="@Model.ModuleIconClassName"></i>
<h1 class="module-title">@Model.ModuleTitle</h1>
<p class="module-desc">@Model.ModuleDescription</p>
...
...
</div>

Also if i can understand your purpose of use, may be i can help to develope it but i did not understand what's your expectations on that plugin :)

Thank you.