(SOLUCIONADO) Icono lupa en cuadro búsqueda

[clicky]

Hola a todos, este es mi primer post, tengo la necesidad de meter un icono png en lugar de la lupa en la página www.todoparatuboda.es y no se cómo hacerlo.

 

En blocksearch.css tengo esto:

 

    #search_block_top .btn.button-search:before {

      content: "\f002";

      display: block;

      font-family: "FontAwesome";

      font-size: 17px;

      width: 100%;

      text-align: center; }

 

Y lo que necesito es que no use fontawesome y lo haga con una imagen directamente... quiero aprender el cómo hacerlo y os pido vuestra generosa ayuda que sigo con bastante frecuencia.

 

Muchas gracias de antemano

[Rolige]

Puedes comentar todo ese codigo y modificar la regla anterior en el archivo: /themes/default-bootstrap/css/modules/blocksearch/blocksearch.css

  #search_block_top .btn.button-search {
    background: url('http://www.amtum.org.mx/lupa.png') no-repeat;
    height: 45px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    color: #fff;
    width: 50px;
    text-align: center;
    padding: 10px 0 11px 0; }
    #search_block_top .btn.button-search span {
      display: none; }
    /*#search_block_top .btn.button-search:before {
      content: "\f002";
      display: block;
      font-family: "FontAwesome";
      font-size: 17px;
      width: 100%;
      text-align: center; }*/

[clicky]

 

Puedes comentar todo ese codigo y modificar la regla anterior en el archivo: /themes/default-bootstrap/css/modules/blocksearch/blocksearch.css

  #search_block_top .btn.button-search {
    background: url('http://www.amtum.org.mx/lupa.png') no-repeat;
    height: 45px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    color: #fff;
    width: 50px;
    text-align: center;
    padding: 10px 0 11px 0; }
    #search_block_top .btn.button-search span {
      display: none; }
    /*#search_block_top .btn.button-search:before {
      content: "\f002";
      display: block;
      font-family: "FontAwesome";
      font-size: 17px;
      width: 100%;
      text-align: center; }*/

Lo primero muchas gracias por contestar, he hecho el cambio que me dices y no me funciona, tengo la imagen en el directorio "public/img/lupa.png"

 

También he probado directamente el código que tu planteas con el link a amtum.org pero nada tampoco lo visualiza, aunque si que se quita la lupa original.

 

Por cierto el foro me dice que sólo me autoriza un post más, no se porqué y no se si podré contestar mas

You can make 1 more posts until 05 March 2015 - 12:09 AM. This restriction is in place until you have 1 more approved posts

[Rolige]

Trata con este:

  #search_block_top .btn.button-search {
    background: url('http://www.amtum.org.mx/lupa.png') no-repeat !important;
    height: 45px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    color: #fff;
    width: 50px;
    text-align: center;
    padding: 10px 0 11px 0; }
    #search_block_top .btn.button-search span {
      display: none; }
    /*#search_block_top .btn.button-search:before {
      content: "\f002";
      display: block;
      font-family: "FontAwesome";
      font-size: 17px;
      width: 100%;
      text-align: center; }*/

[clicky]

COTOKO muchísimas gracias, sois estupendos y en esta ocasión tu. Ya he ubicado el png con el important. Puedes comprobarlo en http://todoparatuboda.es/

 

Tema solucionado, muchas gracias de nuevo