CLOSED: problem with js rendered fontawesome icons.

[Volmarg]

So.

Generally I'm using webpack and most likely some fontawesome redesigned for it - not sure. Anyway, on beginning my icons looked like that:

Take a look that Your elements have tag: i.

Now I fixed my missing icons problem by adding js script attached to the fontawesome pack, but this is what happened:

So, how i partially fixed it.

• The fontawesome icon js script - goes in
• Your script goes on end,
• Added css rules for svg, everywhere that there was i tag, i added same rule for svg, for example:

div#IconPickerModal .ip-icons-content .ip-icons-search > i.placeholder-icon, div#IconPickerModal .ip-icons-content .ip-icons-search > svg.placeholder-icon {

• Now back to Your script. It's not working properly in my case because it fires first, adds click event on all i element and then fontawesome changes it to svg so simples solution was changing Your click code to this:

// each icon click listener on
            function eachIconEventListener(firstOrSearch) {

                var inputElm = document.querySelectorAll(inputElement);
                var previewElm = document.querySelectorAll(previewElement);

                // define icons on
                var eachIconElm;
                if (firstOrSearch === 'first') { // first
                    eachIconElm = document.getElementById(IconPickerModal.id).getElementsByClassName('first-icon');
                } else if (firstOrSearch === 'search') { // search
                    eachIconElm = document.getElementById(IconPickerModal.id).getElementsByClassName('search-icon');
                }
                // define icons off

                // add listeners each on
                var wrapElem = document.querySelector('.ip-icons-content');
                var config = { attributes: true, childList: true, subtree: true };

                var callback = function(mutationsList, observer) {
                    attachClickEventForEachIcon(eachIconElm,inputElm,previewElm);
                };

                var observer = new MutationObserver(callback);
                observer.observe(wrapElem, config);

                attachClickEventForEachIcon(eachIconElm,inputElm,previewElm);

                // add listeners each off

            }

            function attachClickEventForEachIcon(eachIconElm,inputElm,previewElm){

                for (var i = 0; i < eachIconElm.length; i++) {
                    var singleIconElm = eachIconElm[i];
                    singleIconElm.addEventListener('click', function (e) {
                        e.preventDefault();
                        var iconClassName = this.dataset.class;
                        for (var i = 0; i < inputElm.length; i++) {

                            if (inputElm[i].tagName === 'INPUT') {
                                inputElm[i].value = iconClassName;
                            } else {
                                inputElm[i].innerHTML = iconClassName;
                            }

                        }
                        for (var i = 0; i < previewElm.length; i++) {
                            previewElm[i].setAttribute('class', iconClassName);
                        }
                        removeIpElement(400);
                    }, false);
                }
            }

            // each icon click listener off

However I'm just reverting this changes at my code, as this takes way to much time. Just wanted to let You know that there is such problem.

Meanwhile maybe I will find some other solution for my problem.

[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

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

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