Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to use Font Awesome icon instead to select default drop down sign

I would like to use font awesome "fa-chevron-down" icon instead of html select box default style. Please see the attached image.

enter image description here

like image 667
Younus Ali Avatar asked May 23 '14 20:05

Younus Ali


People also ask

How do I add font awesome icons to select option?

To add icons in select option text we have to use the bootstrap-select plugin, which is a great plugin for customizing plain HTML select with some great customization options using bootstrap style. With this plugin, we can style the select element with only simple data attributes or initialize with Javascript.

How do I put font awesome icon into input field?

The font-awesome icon can be placed by using the fa prefix before the icon's name. Example: In this example, we will take a form where the input field is necessary. After that, we will place the font-awesome icon inside the input field. We will use the CDN link to use the font-awesome icons.

Why We Use font awesome icons instead of images?

Designers love the use of icons as fonts because of the flexibility of styling available. Plus, using a font will also render icons as sharp as your device will allow, so there's no need to worry about creating retina graphics since Font Awesome will give you high-quality iconography on every device.

How do I show icons in dropdown?

Icon only DropDownButton can be achieved by using iconCss property and to hide drop down arrow e-caret-hide class is added using cssClass property. The Essential JS 2 provides a set of icons that can be loaded by applying e-icons class name to the element.


1 Answers

You can do this with pseudo classes. I followed the steps here and modified by removing the transforms, using FontAwesome as my font, and the UTF-8 for the icon as the content as instructed here:

select {
padding:4px;
margin: 0;
background: #fff;
color:#888;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
width: 150px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
}

label {position:relative}
label:after {
content:"\f078";   
font-family: "FontAwesome";
font-size: 11px;
color:#aaa;
right:8px; top:4px;
padding:0 0 2px;
position:absolute;
pointer-events:none;
}
label:before {
content:'';
right:4px; top:0px;
width:23px; height:18px;
background:#fff;
position:absolute;
pointer-events:none;
display:block;
}

Here's a codepen in action.

like image 166
surfbird0713 Avatar answered Oct 12 '22 23:10

surfbird0713