Estou tentando criar um botão com ícone ao lado, estou usando ícones do framework bootstrap, estou quebrando a cabeça para faze-lo, sei que o bootstrap tem um componente que faz isso, porém fica em outro estilo, gostaria de fazer personalizado
EX:
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEstou tentando criar um botão com ícone ao lado, estou usando ícones do framework bootstrap, estou quebrando a cabeça para faze-lo, sei que o bootstrap tem um componente que faz isso, porém fica em outro estilo, gostaria de fazer personalizado
EX:
Pela minha experiência com Bootstrap, o melhor caminho a seguir tende a ser o uso das classes já disponibilizadas pela framework, com formatação adicional para chegar ao que pretendemos.
<a href="#" title="" class="btn btn-primary">
<span class="icon">F</span> compartilhar
</a>
Criamos uma class para subscrever os estilos da framework que nos interessam alterar, neste exemplo a btn-facebook
:
<a href="#" title="" class="btn btn-primary btn-facebook">
<span class="icon">F</span> compartilhar
</a>
.btn-facebook{
border-radius:0;
background-color:#0971E4;
padding-left:0;
border:0 none;
}
.btn-facebook > span{
padding:6px 12px;
margin-right:12px;
background-color:#0A62C4;
}
.btn-facebook:hover,
.btn-facebook:active,
.btn-facebook:focus{
background:#0969d6;
}
.btn-facebook:hover > span,
.btn-facebook:active > span,
.btn-facebook:focus > span{
background:#095bb8;
}
Dado que a framework Bootstrap vem com os icons da Glyphicons e os que são disponibilizados não incluem icons de redes sociais, podemos adicionalmente fazer uso dos icons da Font Awesome que contém inúmeras redes sociais:
<a href="#" title="" class="btn btn-primary btn-facebook">
<span><span class="fa fa-facebook"></span></span> compartilhar
</a>
Para o efeito, a forma mais rápida de o fazer é trocar o texto f
pelo icon pretendido quer numa tag <span/>
quer numa tag <i/>
como sugerido no site da Font Awesome.
Exemplo também no JSFiddle.
/* A notação de importante (!important) só está em uso por causa da forma como o StackFiddle gera o output onde este CSS vem primeiro que as bibliotecas externas o que faz com que estes estilos percam prioridade. Ver exemplo no JSFiddle. */
.btn-facebook {
border-radius: 0 !important;
background-color: #0971E4 !important;
padding-left: 0 !important;
border: 0 none !important;
}
.btn-facebook > span {
padding: 6px 12px !important;
margin-right: 12px !important;
background-color: #0A62C4 !important;
}
.btn-facebook:hover,
.btn-facebook:active,
.btn-facebook:focus {
background: #0862c9 !important;
}
.btn-facebook:hover > span,
.btn-facebook:active > span,
.btn-facebook:focus > span {
background: #0954ab !important;
}
p {
padding: 10px !important;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<p>
Botão com a formatação existente na framework:
<br/>
<a href="#" title="" class="btn btn-primary">
<span class="icon">F</span> compartilhar
</a>
</p>
<p>
Botão com a classe que o altera para o estilo pretendido:
<br/>
<a href="#" title="" class="btn btn-primary btn-facebook">
<span class="icon">F</span> compartilhar
</a>
</p>
<p>
Botão com a classe que o altera para o estilo pretendido e com icons da Font Awesome:
<br/>
<a href="#" title="" class="btn btn-primary btn-facebook">
<span><span class="fa fa-facebook"></span></span>compartilhar
</a>
</p>
Com base na imagem de modelo:
button {
border: none;
cursor: pointer;
height: 32px; /* altura c/ base na imagem do AP */
position: relative;
width: 140px /* largura c/ base na imagem do AP*/
}
button span {
color: #fff;
position: absolute;
line-height: 32px !important; /*obs: sobrepondo a regra de line-height do 'font-awesome'*/
top:0; bottom: 0
}
button .icon {
background: #0A62C4;
font-size: 1.1em;
left: 0; width: 40px
}
button .title {
background: #0971E4;
right: 0; width: 100px
}
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>
<!-- ícone usado: http://fortawesome.github.io/Font-Awesome/icon/facebook/ -->
<button>
<span class='icon fa fa-facebook'></span>
<span class='title'>Compartilhar</span>
</button>
Versão apenas com o elemento <button>
:
.facebook {
background: #0870E3;
padding: 8px 10px 8px 40px; /* 40px = tamanho :before + 10px */
color: #fff;
border: none;
font-size: 15px;
position: relative;
}
.facebook:before {
content: 'f';
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #0A62C4;
width: 30px;
line-height: 34px;
text-align: center;
font-weight: bold;
font-size: 18px;
}
<button class="facebook">Compartilhar</button>
Não sei se é bem isso isso que você quer, mas acredito que a partir disso você consiga chegar ao resultado que você deseja:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<button class="btn">
<i class="fa fa-taxi align-top bigger-125"></i>
Default
</button>
<button type="button" class="btn btn-primary btn-lg"><i class="fa fa-taxi align-top bigger-125"></i> Large button</button>