After completion of #44 we need to do a few more things before release.

• Document #16 - better repositioning.
• Document #39 - Render function.
• Add searchPlaceholder and extraClass support #21
• Fix issue #10

Maybe someone could help with this issue. I am using the bootstrap theme with custom svg icon. It's working, but the icon is not aligned in the middle of the selector box. I have tried with v2.0.0 and master and both are not aligned correctly.

<style>
    .icon-airfield:before {  
        content: url("/media/airfield.svg"); 
        vertical-align:"middle" !important;
    }
</style>

<select id="id_form-0-marker" class="fontIconPicker select form-control" name="form-0-marker">
    <option selected="selected" value="">Please Choose</option>
    <option value="1">icon-airfield</option>
</select>

  $(".fontIconPicker").fontIconPicker({
          source: ['icon-airfield']
  });

Result:

See this jsFiddle: https://jsfiddle.net/5m9wco4b/6/

Already working on a solution. Will fix in 2.1.0 branch.

Would be great to add the ability to customize the search text placeholder like we do for the categories. Would make it possible to translate this hardcoded string.

First things first: the script is fantastic, love it!
I was wondering tho if I could make it work together with another icon library such as Fontawesome. I'm planning on building a "select icon" panel in a wordpress template admin area.

• I enqueued FA icons and they show.
• I did the same for fontIconPicker and the select shows up correctly.

But the icon is corrupted/missing (on firefox shows up as a strange glyph, on chrome is just a white bordered box). In firebug i see that the HTML code being generated is correct.

So I was wondering am I missing something or is this a feature to be implemented maybe someday?

I have this very weird problem as the picker won't show up with any styles.
It's just all white.
I've checked that all the css files are loaded properly in the browser, and they are.

The css i include are theese:
jquery.fonticonpicker.min.css
jquery.fonticonpicker.grey.min.css
jquery.fonticonpicker.bootstrap.min.css

And it still looks like this:

Here is the code i use to instantiate the icon picker:
var fontIconPickerInput = $('#fontIconPicker'); fontIconPickerInput.fontIconPicker({ emptyIcon: false, source: ['fas fa-heart', 'fas fa-search', ' fas fa-user', 'fas fa-tag', 'fas fa-help'], theme : 'grey' });

Am I missing something here?
I also tried adding some style to the .selector class, but it doesn't show either.
I don't know what I am doing wrong here.

Hello @micc83,

Finally v3.0.0 is out 🍺🍪... You may now update the links 👍

https://github.com/fontIconPicker/fontIconPicker

After loading the page, how do I select an icon by default？
the default icon come from database.

If the got a value attribute, selected option is not updated when an icon is picked

Not working:

        <select>
            <option value="1">icon-airfield</option>
        </select>

Working:

        <select>
            <option>icon-airfield</option>
        </select>

You can see it here: https://jsfiddle.net/5m9wco4b/5/

These aren't really a big deal, I fixed the first one with CSS, and just ignore the second thing.
I took a screenshot though to give some feedback, it's at the link below.
http://imgur.com/FUrq69w

My dropdown looks like this:

Empty icon shows a chinese character, and no dropdown icon. Icons are showned fine. What could be wrong? Thanks

So I have been long absent on this and finally have enough time and experience to come back at it. But before we proceed with the issues and MRs, I think it would be better if we put up some sort of testing along with continuous integration and some grunt/gulp tasks to create dist files and set things up in package managers like yarn/npm etc.

I have very limited experience with javascript unit testing, but I am good with browser automation tests (acceptance tests) with http://codecept.io/

So @micc83 please suggest.

I see there's no license attached. Does this have a reason?

Hi,

First of all, thanks for this library, it's really useful.

I do have a problem with my WordPress ACF field that I .fontIconPicker(). So far so good, it's working fine, as below :

But I do have repeating field, so I can add various icon field on my screen. I have no problem initializing the plugin on newly added fields, because ACF offers a JS event when new fields are created.

But because of this event in the library :

this.iconPicker.find('.selector-button').click($.proxy(function () {

There is no way to display the selection dropdown or browse through it via the small arrows. The event does not work on newly added elements into the DOM after creation.

I tried to use refreshPicker(), hoping that the event will be taken into account, but that's not the case

function initAndRefreshIconInputs() {
    var $icon_fields = $('.volticon-field input').not('.fonticoned');

    setTimeout(function(){
        $icon_fields.each(function(){
            $(this).addClass('fonticoned');
            fonticonpick_instance = $(this).fontIconPicker({
                source: icomoon_json_icons,
                hasSearch: false
            });

            fonticonpick_els.push(fonticonpick_instance);
        });

        for (var i = 0; i < fonticonpick_els.length; i++) {
            fonticonpick_els[i].refreshPicker({
                source: icomoon_json_icons,
                hasSearch: false
            });
        }
    }, 50);
}

What can I do ?

Thanks for your help

Hi,

I try to reproduce Example 9 of the website.
In my code I link to the JSON file on your website to test it.

This is the part of the code where I link to the JSON file:

// Get the JSON file
        $.ajax({
            url: "http://codeb.it/fonticonpicker/icomoon/selection.json",
            type: 'GET',
            dataType: 'json'
        })
        .done(function(response) {

Everything else in the code of example 9 is the same.
jQuery is loaded off course. The button also changes to the error text.

Do you know why the icons are not loaded on the click of the button?

Regards

I posted in the wrong version

Hi..

Thanks foe this amazing plugin, I am going to use it in one of my wordpress theme. However, I am a bit confused, I only want to use FontAwesome, is there any example which displays categorized fontawesome icons only ?

regards

hi guys , i just inform you that i add simple code .briefly I add in your picker
a part That allow to initialize with a selected icon already

jquery.fonticonpicker.zip
the function which i add called "this.setSelectedIcon" line 879

Kickass project. Fontastic support would be awesome :)

Hi,

I see there is a v3.0 out, but there is no release tag? This makes it that there is no stable release on https://asset-packagist.org/package/bower-asset/fonticonpicker and we use this to get the package in our projects.

Could you please make a v3.0 release tag?

Thank you

As i told you for now i could find only a few bugs. I don't understand why you have added this code:

// Hide source element
// Instead of doing a display:none, we would rather
// make the element invisible
// and adjust the margin
this.element.css({
    visibility: 'hidden',
    top: '-' + this.element.outerHeight(true) + 'px',
    position: 'relative',
    zIndex: '-1',
    left: '-100px'
});

Cause now the inline-block element is not actually put inline with the next block as you can see in the following figure:

Hello,

When your icon list is constructed in the following way, where 'id' is the database id:

<option value="id">fa fa-search</option>

fontIconPicker is going to use the 'id' for the class, as below:

<i data-fip-value"..." class="id"></i>

Would that be possible to add an option to specify for SELECT tag to use the OPTION tag's value attributes or the text between OPTION and /OPTION

It would mean using 'flipBoxTitle' instead of 'item' in line https://github.com/micc83/fontIconPicker/blob/master/jquery.fonticonpicker.js#L640

What do you think?

Greetings,

I want to include only social icons in the select list and initialize plugin with them? Is there a way to perform this? or is there pre-included social icons come with the plugin?

Thanks in advance.

Steps to reproduce:

1. Select a certain category where pagination > 1.
2. Navigate to last page, this will hide the next arrow.
3. Now select another category where pagination > 1.
4. Icons will be rendered from first page but the next and previous button will not reset.

Already working on a fix. Will upload on the 2.1.0 branch.

Hello @micc83

I have a small suggestion to make. Would it be okay if we move fontIconPicker to a separate organization account? The reason why I am asking this

1. It will be synced with npm organization
2. I am learning react right now. Once done, I will create a better doc with react and material ui (will also make fip react compatible and have material themes). We can seamlessly publish it as github pages and get a custom domain from js.org.

Let me know what you think.

I'm used to working with font icons using the number, not the class name thing. I even would like to be able to search using the number. I think the name system these guys use is pretty bogus and the need for the list of thousands of lines of CSS when I'm using only a few of those icons is pretty over the top.
It would be good if there was a mode where you could search using the number (or the existing keywords), the values displayed in the picker would not use the i tag - perhaps just display the html entity, the value that would be saved in the text input is the number. Then I can use that value however I like.
Really to me the 'value' of a font icon is that number. Not the word.

I just downloaded custom pack from IcoMoon and in seletcion.json the icon name is

clipboard, paste

that icon as well as many other are missing in the list since the class contains the comma.

http://prntscr.com/8jkybk

Is it possible to multiselect ?

thanks

I am working on a new documentation template (please check index-new.html), let me know what you think of it. Also I've added two new public methods (already in the docs), please do a review.

No way to set the selected icon programmatically

By default fip closes when clicked outside. We should introduce an option to disable that.

This is useful in cases like WordPress navigation area, when a click on the menu builder is triggered and it would cause fip to close.

hi micc again, sorry for posting another question.. please bear with me as I love your plugin and want to use it in one of my theme that I have been working over 8 months now..

I have successfully created a working example with field on the localhost.. which works perfectly except it does not show the pagination and dropdown icon... but it shows the Fontawesome icons perfectly...

however when loading it in Thickbox (using Zilla Shortcode plugin) it converts the inputbox to a working iconPicker but it doesnt show any icons, I checked the code, its perfectly added everything, but simply doesnt show the fontawesome icons, I put the2 icons before the inputbox to see if there is something wrong with Fontawesome, but those icons how perfectly... what could possible be wrong ? am still digging..

regards

Hi,
I have been working on implementing the icon selector to a CMS form (WordPress). When a user leaves the form-page, the system checks to see if any changes has happened to the form, and if it finds that changes has happened, it prompts the user with a "are you sure you want to leave the page..." message.

For some reason, the script changes the value from whatever is selected to the same value again, which is considered a ".change" event in Javascript, even though the value is the same. In my case this results in the warning every time someone tries to leave the form-page, even if nothing has changed at all.

Note that this is not the case in version 1.0.0, but is the case in 2.0.0.

Is there a way to get around this? Does the script have to trigger the change-event on load?

For now I have to use version 1.0.0 to get around this, but this doesn't trigger the change-warning, even if it is changed, which I don't quite understand.

Thank you for all your time building this.

Hi,
how can we add new icons to existing list?

Hello,

I am forking your repository to support for data-icon attribute (or any other custom attribute) and naming icons (for searching). If you think this features are good, then I can send you a pull request.

Hello,

I have committed all necessary patches for version 2.1.0. I think it is ready to go live now. Please update the readme.md file while on the process.

The first thing we need to focus on is modernize the environment for development. Currently, the build process is manual and code is intermingled.

Phase 1: Modernize environment

• Initialize an npm package.json with devDependencies gulp, jest, babel, eslint, stylelint and needed plugins/config.
• Create editorconfig for consistency with coding.
• Setup linter for JS eslint
• Setup linter for CSS stylelint.

Phase 2: Modularize code

• Separate Plugin from jQuery wrapper and use UMD within the build process. We can concat.
• Further breakdown the Plugin class into separate smaller methods so that we can unit test.
• Refactor CSS with SCSS and separate layout and theming.
• Create JS build process with Rollup, Babel and UglifyJS.
• Create CSS build process with node-sass.

All built code should go under ./dist which should be in .gitignore. All source code will go under ./src which will be under .npmignore.

Phase 3: Setup Testing

• Fix all eslint errors on our own scripts. Mostly is due to spacing and can be fixed automatically.
• Setup test using jest or qunit or karma. Assess what options can be easily used in CI like travis.
• Lint all files in the CI. Use gulp to lint .js and .scss files.

Phase 4: Setup CI

• Use travis-ci for continuous integration. Steps are

General Testing

1. Lint all files.
2. Run jest tests.

Tagged Releases

1. Build distribution.
2. Publish on NPM.
3. Upload artifacts to github release as .zip.

Phase 5: Document procedure

1. Document npm and setup.
2. Document available gulp tasks.
3. Document lint and test process approval for PRs.

References:

Saving some references which I might need in future.

1. https://babeljs.io/docs/plugins/transform-es2015-modules-umd/
2. https://stackoverflow.com/questions/48818400/how-to-transpile-ecma6-import-of-jquery-to-a-umd-wrapper-with-babel
3. https://stackoverflow.com/questions/35061900/converting-a-jquery-plugin-to-an-es6-module
4. https://stackoverflow.com/questions/35136874/extend-es6-plugin-to-jquery-prototype
5. https://medium.com/@tarkus/how-to-build-and-publish-es6-modules-today-with-babel-and-rollup-4426d9c7ca71

When fip element is positioned on right, then it may get overflown by the window width.

The selector popup should adapt to the position.

As I started using the picker on my project, I noticed a much needed feature is missing, ie to append the iconpicker where ever we want. I am already on a commit where I did this, but I need to confirm where to push the commit. I think we can push to master and release it as 2.1.0. Suggestions?

Hi,

How can i trigger change option?

This codes not working.

$("select#ozellikSimgeD").val(array.simge).trigger("change");
$("select#ozellikSimgeD option[value='"+array.simge+"']").attr("selected", "selected");

Thanks,
Metin.

Since we are good to go with version 2.0.0, here are my ideas for future release:

• Make the plugin APIs more like widgets. Instead of having to save the reference in a variable, I think something like this would be a better approach: $('.mypicker').fontIconPicker('setIcons', newSource, newSearch) This will require major structure rewrite.
• Support for HTML data-attr for having inline options. Like <input source="['icon-1', 'icon-2']" />
• Custom events triggered when the picker opens, closes, user chooses an icon, makes search etc. So that others can hook in.
• A new API to set & get individual options. Something like: $('.mypicker').fontIconPicker('options', 'theme', 'fip-grey'); // Setter & $('.mypicker').fontIconPicker('options', 'theme'); // Getter
• Ability to categorize icons on the fly from config or selection json files based on user provided tags. I can adapt to the logic used in IconIndexer script.

This is all I can think of now.

Dear Micc83, Can you help me to select different icons than what i have.

Can i upload other icons than the icons i have. I use your iconpicker in the administration system from wordpress.

Hi,

Thanks for this great work. Just a very very minor change request to accept svg icons for icomoon, font awesome and others: I had to edit the selector to get the selected icon in jquery.fonticonpicker.js L.428:

$(e.currentTarget)
.find('i, svg') // instead of .find('i')
.attr('data-fip-value')

I thought it may be useful for other users.

2nd thing: I built a JSON list with all the Font Awesome Icons categorized, feel free to use it and maybe add an example https://codeb.it/fonticonpicker/: