Adicionar ícone para enviar botão no twitter bootstrap 2

Quero usar os ícones de inicialização do twitter nos botões de envio de entrada do formulário.

Os exemplos em http://twitter.github.com/bootstrap/base-css.html#icons mostram principalmente hiperlinks com estilo.

O mais próximo que eu cheguei é o ícone exibido ao lado do botão, mas não dentro.

<div class="input-prepend">
   <span class="add-on"><i class="icon-user icon-white"></i></span>
   <input type="submit" class="btn-primary" value="Login" >
</div>

Você pode usar uma tag de botão em vez de inserir

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>

Eu acho que você pode usar etiquetas de etiqueta para esse fim. Aqui está um exemplo da barra de navegação HTML do Twitter:

<form class="navbar-search">
    <input type="text" class="search-query" placeholder="Search here" />        
    <label for="mySubmit" class="btn"><i class="icon-search icon-white"></i> Search me</label>
    <input id="mySubmit" type="submit" value="Go" class="hidden" />
</form>

Basicamente, você obtém um elemento de rótulo para a entrada (type = submit) e, em seguida, oculta o envio da entrada real. Os usuários podem clicar no elemento do rótulo e continuar com o envio do formulário.

Eu acho que você deveria experimentar este FontAwesome projetado para ser usado com o Twitter Bootstrap.

<button class="btn btn-primary icon-save">Button With Icon</button>

Você pode adicionar um <a/> com o ícone em algum lugar e vincular uma ação JavaScrit a ele, que envia o formulário. Se necessário, o nome e o valor do nome + valor do botão de envio original podem estar presentes em um atributo oculto. É fácil com o jQuery, permita-me evitar a versão JavaScript pura.

Suponha que esta seja a forma original:

<form method="post" id="myFavoriteForm>
   ...other fields...
   <input class="btn btn-primary" type="submit" name="login" value="Let me in" />
</form>

Altere assim:

<form method="post" id="myFavoriteForm">
   ...other fields...
   <a href="#" class="btn btn-primary" id="myFavoriteFormSubmitButton">
      <i class="icon-user icon-white"></i>&nbsp;Let me in
   </a>
</form>

... e então o jQuery mágico:

$("#myFavoriteFormSubmitButton").bind('click', function(event) {
   $("#myFavoriteForm").submit();
});

Ou se você deseja garantir que o usuário sempre possa enviar o formulário - é o que eu faria no seu lugar -, você pode deixar o botão de envio normal no formulário e ocultá-lo com jQuery .hide (). Ele garante que o login ainda funcione sem JavaScript e jQuery, de acordo com o botão normal de envio (existem pessoas usando links, w3m e navegadores similares), mas fornece um botão sofisticado com ícone, se possível.

Há uma nova maneira de fazer isso com o bootstrap 3:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

Está na página de glyphicons de inicialização em "como usar":

Eu queria os ícones do Twitter Bootstrap em um formulário básico do Rails e me deparei com este post. Depois de pesquisar um pouco, descobri uma maneira fácil de fazer isso. Não tenho certeza se você está usando o Rails, mas aqui está o código. A chave era passar um bloco para o link_to view helper:

<tbody>
    <% @products.each do |product| %>
      <tr>
        <td><%= product.id %></td>
        <td><%= link_to product.name, product_path(product) %></td>
        <td><%= product.created_at %></td>
        <td>
          <%= link_to(edit_product_path(product), :class => 'btn btn-mini') do %>
          Edit <i class="icon-pencil"></i>
          <% end %>

          <%= link_to(product_path(product), :method => :delete, :confirm => 'Are you sure?', :class => 'btn btn-mini btn-danger') do %>
          Delete <i class="icon-trash icon-white"></i>
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<%= link_to(new_product_path, :class => 'btn btn-primary') do %>
    New <i class="icon-plus icon-white"></i>
<% end %>

Caso você não esteja usando o Rails, aqui está o HTML de saída para os links com ícones (para editar, excluir e novos botões de envio)

# Edit
<a href="/products/1/edit" class="btn btn-mini">Edit <i class="icon-pencil"></i></a>

# Delete
<a href="/products/1" class="btn btn-mini btn-danger" data-confirm="Are you sure?" data-method="delete" rel="nofollow"> Delete <i class="icon-trash icon-white"></i></a>

# New
<a href="/products/new" class="btn btn-primary">New <i class="icon-plus icon-white"></i></a>

E aqui está um link para a captura de tela do resultado final: http://grab.by/cVXm

Existe uma maneira de obter glificons (do bootstrap) input type="submit". Usando css3 fundo múltiplo.

HTML:

<form class="form-search">
   …
   <input type="submit" value="Search">
</form>

e CSS:

.form-search input[type="submit"] {
    padding-left:16px; /* space for only one glyphicon */
    background:-moz-linear-gradient(top,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        -moz-linear-gradient(top,#fff 0%,#eee 100%); /* FF hack */
    /* another hacks here  */
    background:linear-gradient(to bottom,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        linear-gradient(to bottom,#fff 0%,#eee 100%); /* Standard way */
}

Se vários planos de fundo estiverem sobrepostos, no topo será o primeiro plano de fundo na background:notação. Portanto, no topo, o fundo é recuado 16pxdo lado esquerdo ( 16pxé a largura de um único glifo), no nível inferior é inteiro glyphicons-halflings.pnge, no nível inferior (cobre todo o elemento), é o mesmo gradiente de fundo que no nível superior.

-48px 0pxé o corte para o ícone de pesquisa ( icon-search), mas é fácil mostrar qualquer outro ícone.

Se alguém precisar de um :hoverefeito, o plano de fundo deve ser novamente digitado na mesma forma.

Eu fiz isso funcionar, mas há algumas ressalvas que ainda não resolvi.

Enfim, é assim que é feito:

Leve o seu botão de entrada médio:

<input type="submit" class="btn btn-success" value="Save">

Recorte o ícone desejado para os botões de envio do arquivo sprite glyphicons, verifique se é uma imagem de 14 x 14 px. Sim, em circunstâncias ideais, você poderia reutilizar o sprite, e se alguém descobrir isso, ficarei feliz em saber como é feito. :-)

Depois de fazer isso, você pode escrever css para o botão de entrada assim:

input[type='submit'] {
    background-image: url('../images/submit-icon.png'), #62C462; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #62C462, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #62C462, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #62C462, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #62C462, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #62C462, #51A351); /* Standard syntax; must be the last statement */
    background-repeat: no-repeat;
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

input[type='submit']:hover {
    background-image: url('../images/submit-icon.png'), #51A351; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #51A351, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #51A351, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #51A351, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #51A351, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #51A351, #51A351); /* Standard syntax; must be the last statement */
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
}

Funciona no Firefox 14, Chrome 21

Não funciona no IE 9

tl; dr: Com um pouco de css, você pode colocar automaticamente ícones nos botões de envio, mas é necessário colocar o ícone em um arquivo separado e ele não funcionará no Internet Explorer.

Eu acho que é uma solução para o seu problema

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>

Use entrada-acréscimo com classes de complemento

<div class="input-append">
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

Eu acho que dessa maneira melhor, funciona bem para mim.

<form name="myform">
<!-- form fields -->
   <a href="#" class="btn btn-success" onclick="document.myform.submit();">
     Submit <i class="icon-plus"></i>&nbsp; Icon
   </a>
</form>