Home Forums Porto Admin Template add Icon in to select drop down menu

This topic contains 2 replies, has 2 voices, and was last updated by  claudiopardal 5 months ago. This post has been viewed 217 times

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10026510

    claudiopardal
    Participant

    Hello,
    I’m trying to add an icon inside of select drop down menu,
    anyboby know how can i do that?


    #10026518

    Support2
    Keymaster

    Hi, thanks for your purchase.

    To do that you can use this exemple below.
    In your HTML file add:

    <div class="select2-wrapper">
        <select class="input icons_select2">
            <option value="fa-dribbble" data-icon="fab fa-dribbble">Dribbble</option>
            <option value="fa-dropbox" data-icon="fab fa-dropbox">Dropbox</option>
            <option value="fa-facebook" data-icon="fab fa-facebook">Facebook</option>
        </select>
    </div>

    and in your (custom.js) add

    function iformat(icon) {
        var originalOption = icon.element;
        return '<i class="' + $(originalOption).data('icon') + '"></i> ' + icon.text;
    }
    $('.icons_select2').select2({
        width: "100%",
        templateSelection: iformat,
        templateResult: iformat,
        escapeMarkup: function(text) {
        	return text;
        }
    });

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10026572

    claudiopardal
    Participant

    Thank you! 😉


Viewing 3 posts - 1 through 3 (of 3 total)