furcan / iconpicker Goto Github PK

View Code? Open in Web Editor NEW

66.0 3.0 20.0 2.13 MB

Use the Font Awesome Icons (Font Awesome Free v5.11.2) in your HTML forms. (1544 icons)

Home Page: https://furcan.github.io/IconPicker/

License: MIT License

JavaScript 69.84% CSS 23.79% HTML 6.36%

icon icons fontawesome font-awesome icon-set icon-packs iconpicker webfonts fontawesome5 fontawesome-icons

iconpicker's People

Contributors

Stargazers

Watchers

Forkers

rizdaprasetya rajibdpi fbollon gimlet-app cardentey philetaylor orionstar curiousteam mywidget diwashpoudel bongdungyeuem27 anishbhaila kabuguad sergio-deb umairmanzoor1143 joaquimjuniors gkeylow sersart alexlaforge

iconpicker's Issues

CLOSED: Does not work with font-awesome JS

If I use

<link rel="stylesheet" href="/lib/furcanIconPicker/dist/fontawesome-5.11.2/css/all.min.css">

it works (but I can't use CSS-only of font-awesome, we depend on some of the JS functionality

Font Awesome with JS says "When using our SVG framework, remember that Font Awesome-based <i> DOM elements are replaced with new <svg> elements by default. Be sure that your css rules target the right elements."

So when using it with JS instead

It fails (can't click icons, etc)

Therefore I beg of thee (: make plugin work with the JS version please (:

#2 relates too (same problem <i> replaced with <svg> elements by Font Awesome )

Multiple pickers?

I want to use multiple pickers on the page. They are almost the same with the same class.

I'am using it like this:

function initIconPicker(){
  IconPicker.Init({
    jsonUrl: "/FontAwesomeIcons.json",

    searchPlaceholder: 'Ikon Keresése',
    showAllButton: 'Mutasd Mind',
    cancelButton: 'Mégsem',
    noResultsFound: 'Nincs ilyen icon.',
    borderRadius: '20px',
  });
  IconPicker.Run('.GetIconPicker');
}

The thing is that one one picker it is working fine, but on the other two the icon modal is displayed but i can't search or scroll to see all the icons.

Does this work with the Pro version of Font Awesome ?

I have pointed to the new css files etc and I added new Icon detail in the JSON file, but the icon is not shown.

SOLVED: Appending icon to any element.

I just wanted to append selected icon into elemnt which has contentEditable == true.

Currently this won't work. I wanted to make some push, or whatever there is on github, but it takes me more than 30s, so I'm just pasting how I fixed it and it might be worth adding in.
Original

            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
                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++) {
                                inputElm[i].value = iconClassName;
                        }
                        for (var i = 0; i < previewElm.length; i++) {
                            previewElm[i].className = iconClassName;
                        }
                        removeIpElement(400);
                    }, false);
                }
                // add listeners each off

            }

Changed

            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
                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].className = iconClassName;
                        }
                        removeIpElement(400);
                    }, false);
                }
                // add listeners each off

            }

Font Awesome 6

The Font Awesome version I have is V 6.

I have added all the css files etc as well as all the svgs etc.

I did try another it pointing to another JSON file, but it did not work.

CLOSED: problem with js rendered fontawesome icons.

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.

furcan / iconpicker Goto Github PK

iconpicker's People

Contributors

Stargazers

Watchers

Forkers

iconpicker's Issues

CLOSED: Does not work with font-awesome JS

Multiple pickers?

I want to use multiple pickers on the page. They are almost the same with the same class.

Does this work with the Pro version of Font Awesome ?

SOLVED: Appending icon to any element.

Font Awesome 6

CLOSED: problem with js rendered fontawesome icons.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs