Quiero cambiar el ícono de selección/ícono desplegable a (fa-chevron-down). ¿Cómo puedo?

Después de investigar con expertos en esta materia, programadores de varias áreas y maestros hemos dado con la solución al dilema y la compartimos en este post.

Solución:

Aquí hay una solución que usa font-awesome’s fa-chevron-down de forma nativa (sin usar una imagen). Requiere que agregue una etiqueta de fuente impresionante a su marcado, pero es bastante limpio.

/* remove the original arrow */
select.input-lg 
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  /* no standardized syntax available, no ie-friendly solution available */


select + i.fa 
  float: right;
  margin-top: -30px;
  margin-right: 5px;
  /* this is so when you click on the chevron, your click actually goes on the dropdown menu */
  pointer-events: none;
  /* everything after this is just to cover up the original arrow */
  /* (for browsers that don't support the syntax used above) */
  background-color: #fff;
  padding-right: 5px;

  

    

      
Heading
      

        Some-text
        
          Option 1
          Option 2
          Option 3
        
        
        Some-text
        
          Option 1
          Option 2
          Option 3
        
        
        Some-text
        
          Option 1
          Option 2
          Option 3
        
        
      
    
  

Esta es una solución basada en la solución anterior (Woodrow Barlow), con ligeras mejoras

    /* remove the original arrow */
    select
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none; 
        background-color: #92ceea!important;
     

    select::-ms-expand 
        display: none;
    

    select + i.fa 
        float: right;
        margin-top: -26px;
        margin-right: 10px;
        /* this is so when you click on the chevron, your click actually goes on the dropdown menu */
        pointer-events: none;
        /* everything after this is just to cover up the original arrow */
        /* (for browsers that don't support the syntax used above) */
        background-color: transparent;
        color:black!important;
        padding-right: 5px;
    

   select option
       padding-right: 21px;
   

        select_option

        Opção1
        Opção2

Compatibilidad del navegador
Safari 5.1.7 | IE9 | Firefox | Google Chrome

Nota
En IE9 fa la flecha está al frente

---

---

Utiliza Nuestro Buscador