7
I’m trying to create a button with icon on the side, I’m using icons of the bootstrap framework, I’m breaking my head to do it, I know the bootstrap has a component that does it, but it’s in another style, I’d like to do it custom
EX:
4 answers
10
From my experience with Bootstrap, the best way forward tends to be to use the classes already provided by the framework, with additional formatting to get to what we want.
Formatting of the Bootstrap
<a href="#" title="" class="btn btn-primary">
<span class="icon">F</span> compartilhar
</a>
Additional formatting
We created a class to subscribe to the styles of the framework we are interested in changing, in this example to 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;
}
Formatting of the Icon
Since the Bootstrap framework comes with the icons glyphicons and those that are made available do not include icons of social networks, we can additionally make use of the icons of Font Awesome that contains numerous social networks:
<a href="#" title="" class="btn btn-primary btn-facebook">
<span><span class="fa fa-facebook"></span></span> compartilhar
</a>
The quickest way to do this is to change the text f by the desired icon either in a tag <span/> either at a tag <i/> as suggested on the Font Awesome website.
Also in the 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>-
3
+1 The final result was excellent! Congrats!
-
Thank you very much!
-
1
The staff did well in the answers. All deserve +1.
10
Based on model image:
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>7
Version with element only <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>3
I don’t know if this is what you want, but I believe that from this you can get the result you want:
<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>Browser other questions tagged css
You are not signed in. Login or sign up in order to post.
You want to create the custom button, or use custom icons?
– Lucio Rubens
Button with icons already created.
– Thiago
Interesting is that the button tag was developed to achieve this kind of need. Here has a website that talks about the advantages of using button, not input.
– Wesley Redfield