Question related other iconpacks

[foyle82]

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?

[micc83]

You can use any custom font icons package. However you'll have to manually build the icons array and pass it to the source option of the script.

jQuery(document).ready(function($) {
    $('#your_input').fontIconPicker({
        source:    ['your', 'custom', 'icons', 'classes', 'here'],
    });
});

If you're having trouble visualizing icons when offline keep in mind CORS. Disable cross origin checks on the browser or work online.

[foyle82]

Example 1

        <select id="myselect" name="myselect" class="myselect">
            <option value="">No icon</option>
            <option>fa fa-arrow-circle-right</option> // I changed/added only this icon here
            <option>icon-right-dir</option>
            <option>icon-star</option>
            <option>icon-cancel</option>
            <option>icon-help-circled</option>
            <option>icon-info-circled</option>
            <option>icon-eye</option>
            <option>icon-tag</option>
        </select>

        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('#myselect').fontIconPicker();
            });
        </script>

Example 2

        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('#myselect').fontIconPicker({
                    source: ['fa fa-arrow-circle-right', 'fa fa-arrow-circle-right']
                });
            });
        </script>

Either way, the result is the same: Fontawesome shows that way while inside the select (as you can see from the example it works outside). Same results in Chrome and Firefox. As for CORS i did use the following shortcut for chrome (in order to disable it): "C:\Users\YOUR_USER\AppData\Local\Google

\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security". But nothing changed. Even uploaded the website online but with no different

results.

[micc83]

Well, that's actually a weird behavior. Could you link me an example?

Inviato da iPhone

Il giorno 21/lug/2014, alle ore 22:30, foyle82 notifications@github.com ha scritto:

Example #1

    <select id="myselect" name="myselect" class="myselect">
        <option value="">No icon</option>
        <option>fa fa-arrow-circle-right</option> // I changed/added only this icon here
        <option>icon-right-dir</option>
        <option>icon-star</option>
        <option>icon-cancel</option>
        <option>icon-help-circled</option>
        <option>icon-info-circled</option>
        <option>icon-eye</option>
        <option>icon-tag</option>
    </select>

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('#myselect').fontIconPicker();
        });
    </script>

Example #2

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('#myselect').fontIconPicker({
                source: ['fa fa-arrow-circle-right', 'fa fa-arrow-circle-right']
            });
        });
    </script>

Either way, the result is the same: Fontawesome shows that way while inside the select (as you can see from the example it works outside). Same results in Chrome and Firefox. As for CORS i did use the following shortcut for chrome (in order to disable it): "C:\Users\YOUR_USER\AppData\Local\Google

\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security". But nothing changed. Even uploaded the website online but with no different

results.

— Reply to this email directly or view it on GitHub.

[foyle82]

http://www14.zippyshare.com/v/30655219/file.html

Contains your demo + 1html file containing my select and links to FA.

[micc83]

Allright. I figured it out. It's a CSS bug. Edit jquery.fonticonpicker.min.css and remove any font reference from .icons-selector *. What left should look like this:

.icons-selector * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

[foyle82]

Terribly sorry to bother you more but given jquery.fonticonpicker.js (in order to make things a little more clear) where and what should I edit precisely? I lost you there :<

[micc83]

No problem @foyle82,

Replace the content of the file css/jquery.fonticonpicker.min.css with the following:

/* fontIconPicker main CSS file {@link https://github.com/micc83/fontIconPicker} */
.icons-selector *{margin:0;padding:0;border:0;vertical-align:baseline;}.icons-selector,.icons-selector *,.icons-selector :after,.icons-selector :before,.icons-selector:after,.icons-selector:before{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.icons-selector{display:inline-block;vertical-align:middle;text-align:left}.icons-selector .selector{width:100px;height:40px}.icons-selector .selector-button{width:39px;height:100%;display:block;text-align:center;cursor:pointer;float:left}.icons-selector .selector-button i{line-height:38px;text-align:center}.icons-selector .selected-icon{display:block;width:60px;height:100%;float:left;text-align:center}.icons-selector .selected-icon i{line-height:40px;font-size:18px;cursor:default}.icons-selector .selector-popup{position:absolute;z-index:10000;background-color:#fefefe;padding:5px;height:auto;width:342px;margin-top:-1px}.icons-selector .selector-category select,.icons-selector .selector-search input[type=text]{border:0;line-height:20px;padding:10px 2.5%;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin-bottom:5px;font-size:12px;display:block}.icons-selector .selector-category select{height:40px}.icons-selector .selector-category select option{padding:10px}.icons-selector input::-webkit-input-placeholder{text-transform:uppercase}.icons-selector input:-moz-placeholder{text-transform:uppercase}.icons-selector input::-moz-placeholder{text-transform:uppercase}.icons-selector input:-ms-input-placeholder{text-transform:uppercase}.icons-selector .selector-search{position:relative}.icons-selector .selector-search i{position:absolute;right:10px;top:7px}.icons-selector .fip-icons-container{width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5px}.icons-selector .fip-icons-container .loading{font-size:24px;margin:0 auto;padding:20px 0;text-align:center;width:100%}.icons-selector .fip-box{display:inline-block;margin:2px;width:60px;line-height:42px;text-align:center;cursor:pointer;vertical-align:top;height:40px}.icons-selector .selector-footer{line-height:12px;padding:5px 5px 0;text-align:center}.icons-selector .selector-footer,.icons-selector .selector-footer i{font-size:14px}.icons-selector .selector-arrows{float:right}.icons-selector .selector-pages{font-size:11px;float:left}.icons-selector .selector-arrows i{cursor:pointer}.icons-selector .selector-footer em{font-style:italic}.icons-selector .icons-picker-error i:before{color:#eee}@font-face{font-family:iconpicker;src:url(iconpicker.eot?90190138);src:url(iconpicker.eot?90190138#iefix) format('embedded-opentype'),url(iconpicker.woff?90190138) format('woff'),url(iconpicker.ttf?90190138) format('truetype'),url(iconpicker.svg?90190138#iconpicker) format('svg');font-weight:400;font-style:normal}.icons-selector [class*=" fip-icon-"]:before,.icons-selector [class^=fip-icon-]:before{font-family:iconpicker;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em}.icons-selector .fip-icon-search:before{content:'\e812';cursor:default}.icons-selector .fip-icon-cancel:before{content:'\e814';cursor:pointer}.icons-selector .fip-icon-block:before{content:'\e84e';color:#fed0d0}.icons-selector .fip-icon-down-dir:before{content:'\e800'}.icons-selector .fip-icon-up-dir:before{content:'\e813'}.icons-selector .fip-icon-left-dir:before{content:'\e801'}.icons-selector .fip-icon-right-dir:before{content:'\e802'}.icons-selector .fip-icon-spin3:before{content:'\e815'}.icons-selector .fip-icon-spin3{-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;display:inline-block}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-o-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-ms-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}

[foyle82]

Wops - I misread your previous reply and went through jquery.fonticonpicker.js countless times. It was the .css file, my bad. But in any event, thank you very much for you patience: now it works wonderfully! :D

[micc83]

No problem. Good luck with your project!