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


227

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>

2
Eu tentei fazer isso por um tempo sem sucesso. Basicamente, você não pode adicionar elementos html ao valor de um botão.
John Goodman

@ JohnGoodman Isso deve ser uma resposta, não um comentário. A resposta aceita é uma solução alternativa e não uma resposta direta à pergunta.
cartbeforehorse

Respostas:


394

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>

12
Isso funciona, no entanto, consulte w3schools.com/tags/tag_button.asp para obter mais informações sobre o significado da tag do botão e seu efeito no navegador. Use isso com cautela, especialmente com formulários.
Matenia Rossides

10
Eu testei isso no Chrome, Firefox, Safari (no Win7) e IE8 dentro de uma tag <form>, como um botão de envio com sucesso
Sr. Sino

4
O único problema que tive com essa abordagem é que, se houver outros botões no formulário, ele não será enviado ao pressionar a tecla Enter no teclado, pois um dos outros botões terá precedência. Alguma solução alternativa conhecida?
Jeshurun

2
Era exatamente o que eu estava fazendo. No entanto, o ícone não apareceu depois que adicionei a <i>tag. Foi extremamente enlouquecedor, até que descobri que precisava limpar o cache. Se você encontrar o mesmo problema, pessoal, pressione Ctrl+F5para limpar o cache e atualizar, e veja o ícone glorioso!
Aditya MP

2
Eu precisava adicionaronClick="submit();"
TimP

67

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.


9
Isso para mim é o melhor dos dois mundos. Você obtém o estilo desejado e não está usando um link ou javascript.
AaronLS

1
Embora isso aplique o estilo e tenha uma ótima aparência, ele impede que o formulário seja enviado quando o usuário pressionou enter em um campo de entrada. (Testado apenas no FF17)
Richard

1
Claramente a melhor solução para mim. Felicidades!
Armel Larcier

14

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>

11

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.


Peço que você responda a esta pergunta se tiver alguma idéia. stackoverflow.com/questions/11295378/…
Krishnaprasad Varma

8

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":


7

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


2
Então, o que acontece quando um mecanismo de pesquisa rastreia seu site, vê um link chamado 'Excluir', decide: "Ah, acho que vou seguir esse link" e começa a mexer no seu banco de dados? Sempre me disseram que as alterações sempre deveriam ser executadas com operações não GET por esse motivo.
Asfand Qazi

Ele provavelmente está usando autorização para excluir links, a maioria das pessoas usa.
No5 /

2
Fora do tópico, já que o OP não estava perguntando sobre trilhos, mas ... O Rails realmente usa um método de exclusão ao integrar esse tipo de hiperlink via javascript discreto. Se alguém solicitasse esse link diretamente, o padrão seria apresentar esse registro, não excluí-lo. Veja esta resposta para obter mais detalhes: stackoverflow.com/a/2809412/252290
levous

Isso é especificamente sobre um botão de envio, não uma marca de âncora.
Pixelearth 26/05

6

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.


Embora isso possa funcionar, certamente não é tão elegante quanto usar <button type = "submit"> e será mais difícil de manter.
Richard

4

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.


1

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>

1

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
 
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print 
    </a>
  </p> 
</div>

</body>
</html>


1
A pergunta era sobre o envio
Grigory Kislin

Esta é a inicialização 3 - a pergunta era sobre o formato da inicialização 2, que usa outro formato para exibir os ícones.
Calaelen


-1

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>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.