CODEWITHSUNDEEP
jquerycsshtml-selectfont-awesomejquery-chosen
Marius Popa
Marius Popa

Reputation: 584

How can i add a left side font-awesome icon in a chosen.js select control?

I started using chosen.js plugin for customization of html select control. It's working just fine...but i need to embed into that a font-awesome icon, left positioned, and a padding to the text of about 30 pixels (not important).

Does anyone know how can i do that? I'm clueless.

Thanks in advance.

Upvotes: 3

Views: 4751

Answers (2)

TravisO
TravisO

Reputation: 9550

Unfortunately the Chosen multi select can't truly mimic a classic select's dropdown arrow, I was able to get close but with one quirk; the arrow will align right bottom when you add items to the multi box. Initially it will look perfect, and will go back to perfect if you clear the multi, but because of how the control is constructed it's the nature of the beast.

/* Custom drop down arrow for faux dropdowns that Chosen uses in Task View */
li.search-field {
            background: url(/Images/down-arrow-tiny.png) right no-repeat;
            width: 290px;
            float: left;
}

Upvotes: 0

Jonathan Pasquier
Jonathan Pasquier

Reputation: 2591

Assuming your markup is like this:

<select id="my-select" class="chosen-with-icon">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

The following CSS code will insert the FontAwesome "user" icon on the left side of the input:

select.chosen-with-icon + .chosen-container.chosen-container-single .chosen-single {
    padding-left    : 35px;
}

select.chosen-with-icon + .chosen-container.chosen-container-single .chosen-single:before {
    content : "\f007";
    display : block;
    font-family : FontAwesome;
    left    : 0;
    position    : absolute;
    text-align  : center;
    width   : 30px;
}

To change the icon, you will have to replace f007 in the content property by the unicode code of the icon which you will find on FontAwesome site. For instance, you can find the code for a star icon here http://fortawesome.github.io/Font-Awesome/icon/star/

If you want to get fancy and mimic Bootstrap input group style, you could do something like this:

select.chosen-with-icon + .chosen-container.chosen-container-single .chosen-single {
    padding-left    : 35px;
}

select.chosen-with-icon + .chosen-container.chosen-container-single .chosen-single:before {
    background-color    : #f0f0f0;
    border-right    : 1px solid #ccc;
    content : "\f007";
    display : block;
    font-family : FontAwesome;
    height  : 100%;
    left    : 0;
    line-height : 25px;
    position    : absolute;
    text-align  : center;
    top : 0;
    width   : 30px;
}

The CSS is roughly the same for multi-select, just replace

select.chosen-with-icon + .chosen-container.chosen-container-single .chosen-single

by 

select.chosen-with-icon + .chosen-container-multi .chosen-choices

And 

select.chosen-icon + .chosen-container.chosen-container-single .chosen-single:before

by

select.chosen-icon + .chosen-container-multi .chosen-choices:before

Upvotes: 3

Related Questions