iconSelector.html

<style>
    /*!
 * Simple Font Awesome Icon Picker 2.0
 * http://howlthemes.com
 *
 * Originally written by (c) 2016-17 Aumkar Thakur
 * Special Thanks To Deepak Kamat
 * Licensed under the MIT License
 * https://github.com/aumkarthakur/simple-fontawesome-iconpicker/blob/master/LICENSE
 *
 */

    .howl-iconpicker-outer {
        background: rgbgia(0, 0, 0, .78);
        display: none;
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999999999
    }

    .howl-iconpicker-middle {
        display: table-cell;
        vertical-align: middle
    }

    .howl-iconpicker-close {
        background: #e83131;
        color: #fff;
        padding: 10px;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 1px;
        text-align: center;
        width: 242px;
        margin: 0 auto;
        cursor: pointer
    }

    .howl-iconpicker-close:hover {
        background: #e62323
    }

    .howl-iconpicker {
        border: 1px solid #ccc;
        background: #efefef;
        width: 260px;
        margin: 0 auto;
        display: block;
        position: relative
    }

    .howl-iconpicker:active,
    .howl-iconpicker:focus,
    .howl-iconpicker:hover {
        display: block!important
    }

    .howl-iconpicker .geticonval .fa {
        font-size: 28px;
        margin-right: 10px;
        padding-bottom: 10px
    }

    .howl-iconpicker .geticonval {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        background: #fcfcfc;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 3px;
        margin: 5px;
        width: 28px;
        height: 28px;
        overflow: hidden;
        float: left
    }

    .howl-iconpicker .geticonval:hover {
        background: #efefef;
        cursor: pointer
    }

    .howl-iconpicker .geticonval:active {
        background: #ccc
    }

    .srchicons {
        margin: 5px 5px 60px;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 3px;
        width: 225px;
        position: absolute;
        display: block
    }

    .iconsholder {
        height: 300px;
        overflow: auto;
        margin-top: 50px
    }

    .selectedicon {
        background: #f55e4f!important;
        border-color: #f55e4f!important;
        color: #fff
    }
</style>

<script>
    jQuery(document).ready(function () {
            jQuery("body").prepend(
                '<div class="howl-iconpicker-outer"><div class="howl-iconpicker-middle"><div class="howl-iconpicker"><div class="howl-closebtn"></div><input type="text" class="srchicons" placeholder="eg:google" /> <div class="iconsholder"></div></div><div class="howl-iconpicker-close">Close</div></div></div>'
            );
            for (var a =
                    "500px address-book address-book-o address-card address-card-o adjust adn align-center align-justify align-left align-right amazon ambulance american-sign-language-interpreting anchor android angellist angle-double-down angle-double-left angle-double-right angle-double-up angle-down angle-left angle-right angle-up apple archive area-chart arrow-circle-down arrow-circle-left arrow-circle-o-down arrow-circle-o-left arrow-circle-o-right arrow-circle-o-up arrow-circle-right arrow-circle-up arrow-down arrow-left arrow-right arrow-up arrows arrows-alt arrows-h arrows-v asl-interpreting assistive-listening-systems asterisk at audio-description automobile backward balance-scale ban bandcamp bank bar-chart bar-chart-o barcode bars bath bathtub battery battery-0 battery-1 battery-2 battery-3 battery-4 battery-empty battery-full battery-half battery-quarter battery-three-quarters bed beer behance behance-square bell bell-o bell-slash bell-slash-o bicycle binoculars birthday-cake bitbucket bitbucket-square bitcoin black-tie blind bluetooth bluetooth-b bold bolt bomb book bookmark bookmark-o braille briefcase btc bug building building-o bullhorn bullseye bus buysellads cab calculator calendar calendar-check-o calendar-minus-o calendar-o calendar-plus-o calendar-times-o camera camera-retro car caret-down caret-left caret-right caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up caret-up cart-arrow-down cart-plus cc cc-amex cc-diners-club cc-discover cc-jcb cc-mastercard cc-paypal cc-stripe cc-visa certificate chain chain-broken check check-circle check-circle-o check-square check-square-o chevron-circle-down chevron-circle-left chevron-circle-right chevron-circle-up chevron-down chevron-left chevron-right chevron-up child chrome circle circle-o circle-o-notch circle-thin clipboard clock-o clone close cloud cloud-download cloud-upload cny code code-fork codepen codiepie coffee cog cogs columns comment comment-o commenting commenting-o comments comments-o compass compress connectdevelop contao copy copyright creative-commons credit-card credit-card-alt crop crosshairs css3 cube cubes cut cutlery dashboard dashcube database deaf deafness dedent delicious desktop deviantart diamond digg dollar dot-circle-o download dribbble drivers-license drivers-license-o dropbox drupal edge edit eercast eject ellipsis-h ellipsis-v empire envelope envelope-o envelope-open envelope-open-o envelope-square envira eraser etsy eur euro exchange exclamation exclamation-circle exclamation-triangle expand expeditedssl external-link external-link-square eye eye-slash eyedropper fa facebook facebook-f facebook-official facebook-square fast-backward fast-forward fax feed female fighter-jet file file-archive-o file-audio-o file-code-o file-excel-o file-image-o file-movie-o file-o file-pdf-o file-photo-o file-picture-o file-powerpoint-o file-sound-o file-text file-text-o file-video-o file-word-o file-zip-o files-o film filter fire fire-extinguisher firefox first-order flag flag-checkered flag-o flash flask flickr floppy-o folder folder-o folder-open folder-open-o font font-awesome fonticons fort-awesome forumbee forward foursquare free-code-camp frown-o futbol-o gamepad gavel gbp ge gear gears genderless get-pocket gg gg-circle gift git git-square github github-alt github-square gitlab gittip glass glide glide-g globe google google-plus google-plus-circle google-plus-official google-plus-square google-wallet graduation-cap gratipay grav group h-square hacker-news hand-grab-o hand-lizard-o hand-o-down hand-o-left hand-o-right hand-o-up hand-paper-o hand-peace-o hand-pointer-o hand-rock-o hand-scissors-o hand-spock-o hand-stop-o handshake-o hard-of-hearing hashtag hdd-o header headphones heart heart-o heartbeat history home hospital-o hotel hourglass hourglass-1 hourglass-2 hourglass-3 hourglass-end hourglass-half hourglass-o hourglass-start houzz html5 i-cursor id-badge id-card id-card-o ils image imdb inbox indent industry info info-circle inr instagram institution internet-explorer intersex ioxhost italic joomla jpy jsfiddle key keyboard-o krw language laptop lastfm lastfm-square leaf leanpub legal lemon-o level-down level-up life-bouy life-buoy life-ring life-saver lightbulb-o line-chart link linkedin linkedin-square linode linux list list-alt list-ol list-ul location-arrow lock long-arrow-down long-arrow-left long-arrow-right long-arrow-up low-vision magic magnet mail-forward mail-reply mail-reply-all male map map-marker map-o map-pin map-signs mars mars-double mars-stroke mars-stroke-h mars-stroke-v maxcdn meanpath medium medkit meetup meh-o mercury microchip microphone microphone-slash minus minus-circle minus-square minus-square-o mixcloud mobile mobile-phone modx money moon-o mortar-board motorcycle mouse-pointer music navicon neuter newspaper-o object-group object-ungroup odnoklassniki odnoklassniki-square opencart openid opera optin-monster outdent pagelines paint-brush paper-plane paper-plane-o paperclip paragraph paste pause pause-circle pause-circle-o paw paypal pencil pencil-square pencil-square-o percent phone phone-square photo picture-o pie-chart pied-piper pied-piper-alt pied-piper-pp pinterest pinterest-p pinterest-square plane play play-circle play-circle-o plug plus plus-circle plus-square plus-square-o podcast power-off print product-hunt puzzle-piece qq qrcode question question-circle question-circle-o quora quote-left quote-right ra random ravelry rebel recycle reddit reddit-alien reddit-square refresh registered remove renren reorder repeat reply reply-all resistance retweet rmb road rocket rotate-left rotate-right rouble rss rss-square rub ruble rupee s15 safari save scissors scribd search search-minus search-plus sellsy send send-o server share share-alt share-alt-square share-square share-square-o shekel sheqel shield ship shirtsinbulk shopping-bag shopping-basket shopping-cart shower sign-in sign-language sign-out signal signing simplybuilt sitemap skyatlas skype slack sliders slideshare smile-o snapchat snapchat-ghost snapchat-square snowflake-o soccer-ball-o sort sort-alpha-asc sort-alpha-desc sort-amount-asc sort-amount-desc sort-asc sort-desc sort-down sort-numeric-asc sort-numeric-desc sort-up soundcloud space-shuttle spinner spoon spotify square square-o stack-exchange stack-overflow star star-half star-half-empty star-half-full star-half-o star-o steam steam-square step-backward step-forward stethoscope sticky-note sticky-note-o stop stop-circle stop-circle-o street-view strikethrough stumbleupon stumbleupon-circle subscript subway suitcase sun-o superpowers superscript support table tablet tachometer tag tags tasks taxi telegram television tencent-weibo terminal text-height text-width th th-large th-list themeisle thermometer thermometer-0 thermometer-1 thermometer-2 thermometer-3 thermometer-4 thermometer-empty thermometer-full thermometer-half thermometer-quarter thermometer-three-quarters thumb-tack thumbs-down thumbs-o-down thumbs-o-up thumbs-up ticket times times-circle times-circle-o times-rectangle times-rectangle-o tint toggle-down toggle-left toggle-off toggle-on toggle-right toggle-up trademark train transgender transgender-alt trash trash-o tree trello tripadvisor trophy truck try tty tumblr tumblr-square turkish-lira tv twitch twitter twitter-square umbrella underline undo universal-access university unlink unlock unlock-alt unsorted upload usb usd user user-circle user-circle-o user-md user-o user-plus user-secret user-times users vcard vcard-o venus venus-double venus-mars viacoin viadeo viadeo-square video-camera vimeo vimeo-square vine vk volume-control-phone volume-down volume-off volume-up warning wechat weibo weixin whatsapp wheelchair wheelchair-alt wifi wikipedia-w window-close window-close-o window-maximize window-minimize window-restore windows won wordpress wpbeginner wpexplorer wpforms wrench xing xing-square y-combinator y-combinator-square yahoo yc yc-square yelp yen yoast youtube youtube-play youtube-square",
                    b = a.split(" "), c = 0; c < b.length; c++) jQuery(".howl-iconpicker .iconsholder").append(
                '<p class="geticonval"><i class="fa fa-' + b[c] + '"></i>' + b[c] + "</p>");
            jQuery(".howl-iconpicker .srchicons").keyup(function () {
                var a = jQuery(this).val(),
                    b = 0;
                jQuery(".howl-iconpicker .geticonval").each(function () {
                    jQuery(this).text().search(new RegExp(a, "i")) < 0 ? jQuery(this).fadeOut() : (
                        jQuery(this).show(), b++)
                })
            }), jQuery(".howl-iconpicker-close").click(function () {
                jQuery(".howl-iconpicker-outer").css("display", "none")
            }), jQuery(".howl-iconpicker").on("click", function (a) {
                a.stopPropagation()
            }), jQuery(".howl-iconpicker-outer").on("click", function () {
                jQuery(".howl-iconpicker-outer").css("display", "none")
            })
        }),
        function (a) {
            a.fn.iconpicker = function (b) {
                a(this).focusin(function () {
                    a(".howl-iconpicker-outer").css("display", "table"), a(".howl-iconpicker .geticonval").removeClass(
                            "selectedicon"), whichInputClass = a(this).attr("class"), whichInputId = a(this)
                        .attr("id"), a(".howl-iconpicker .geticonval").on("click", function () {
                            var c = a(this).text();
                            a(".howl-iconpicker .geticonval").removeClass("selectedicon"), a(this).addClass(
                                "selectedicon"), a(b).attr("class") == whichInputClass && a(b).attr(
                                "id") == whichInputId && a(b).val("fa-" + c).change()
                        })
                })
            }
        }(jQuery);
</script>
<style>
    /* The Modal (background) */

    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1000;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        /* Black w/ opacity */
    }
    /* Modal Content/Box */

    .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
        width: 300px;
        /* Could be more or less, depending on screen size */
    }
    /* The Close Button */

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .input {
        border: 1px solid #ccc;
        background: #efefef;
        padding: 10px;
        font-size: 14px;
        border-radius: 3px;
        outline: none;
    }

    .input:focus {
        border-color: #4598ff;
    }
</style>

<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Press the Input Field Below to select a new Icon</p>
        <input type="hidden" id="hid2" value="" />
        <input type="text" id="iconSelection" class="input3 input" />
        <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
        <button id="iconSubmit" type="button">Submit</button>

    </div>

</div>
<script>
    // $(".fa").each(function(index) {
    // 	$(this).attr('class','fa fa-bolt')
    // })
    var modal = document.getElementById('myModal');

    // Get the button that opens the modal

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on the button, open the modal 

    // When the user clicks on <span> (x), close the modal
    span.onclick = function () {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    console.log('LOADED');

    $(document).click(function (event) {
        if (
            $(event.target)
            .attr('class')
            .indexOf('fa fa-') !== -1
        ) {
            const randID = Math.floor(Math.random() * 100000);
            $(event.target).attr('id', randID);
            $('#hid2').attr('value', randID);
            modal.style.display = "block";
            $('.input3').iconpicker('.input3');


        } else {
            console.log($(event.target).attr('class'));
        }
    });

    $('#iconSubmit').click(function (event) {
        //removes old font awesome icon class
        $('#' + $('#hid2').attr('value')).removeClass(function (index, css) {
            return (css.match(/(^|\s)fa-\S+/g) || []).join(' ');
        });
        let newFont;
        //if textfield has value
        if (document.getElementById('iconSelection').value.length > 0) {
            //set to new value of field plus the original classes of the icon (minus the old one)
            newFont = $('#' + $('#hid2').attr('value')).attr('class') + " " + document.getElementById(
                'iconSelection').value
        } else {
            //else set to original value
            newFont = $('#' + $('#hid2').attr('value')).attr('class');
        }
        console.log(newFont + "******");
        //assign icon selected with new icon from field. This works by:
        //1 getting the id from the hidden field, set when modal first opened on click: $('#' + $('#hid2').attr('value'))
        //2. set the class of that the value of the textfield value
        $('#' + $('#hid2').attr('value')).attr('class', newFont);
        modal.style.display = "none";
    })
    //reset textField
    document.getElementById('iconSelection').text = ''
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            }
        });
    });
</script>