Create button with icon next

Question

Create button with icon next

Navigation

#1 by (10 votes)
#2 by (10 votes)
#3 by (7 votes)
#4 by (3 votes)

7

I'm trying to create a button with an icon next to it, I'm using bootstrap framework icons, I'm breaking my head to do it, I know bootstrap has a component that does this, but it stays in another style,

EX:

css

asked by anonymous 17.12.2014 / 03:14

4 answers

10

Based on the 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>

17.12.2014 / 07:47

7

Version only with element <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>

17.12.2014 / 23:27

3

I do not know if this is what you want, but I believe that from that you can achieve 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><linkhref="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>

17.12.2014 / 03:32

Is there a difference in using HTML5 attributes with or without true / false? How to change the PATH in Windows

score 10 · Accepted Answer

In my experience with Bootstrap, the best way forward is to use the classes already made available by the framework, with additional formatting to get what we want.

Bootstrap formatting

<a href="#" title="" class="btn btn-primary">
    <span class="icon">F</span> compartilhar
</a>

Button with existing formatting in the Bootstrap framework

Additional formatting

We created a class to subscribe to the styles of the framework that 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;
}

Bootstrap framework button with change of intended

Icon Formatting

Since the Bootstrap framework comes with the icons from Glyphicons and those that are made available include icons of social networks, we can additionally make use of icons of Awesome Font that contains numerous social networks :

<a href="#" title="" class="btn btn-primary btn-facebook">
    <span><span class="fa fa-facebook"></span></span> compartilhar
</a>

To do this, the quickest way to do this is to change the text f to the desired icon either in a <span/> tag or in a <i/> tag as suggested on the Awesome Font website.

Bootstrap framework button with change of intended and Awesome Font icon

Example also in 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>