Adicionar ícone awesome nos botões

Detalhes da questão

Endereço do fórum: http://bl-rpg.forumeiros.com/
Versão do fórum: ModernBB

Descrição

CSS

Código:

.btn{
  font-family: arial;
  font-size:14px;
  text-transform: uppercase;
  font-weight:700;
  border:none;
  padding:10px;
  cursor:pointer;
  display:inline-block;
  text-decoration: none;
  border-radius: 30px;
}
.btn-green{
  background:Green;
  color:#fff;
  box-shadow:0 5px 0 #2E2E2E;
}
.btn-green:hover{
  background:#006000;
  color:#fff;
  box-shadow:0 5px 0 #003f00;
  transform: scale(1.05);
}
.btn-green:active{
  position:relative;
  top:5px;
  box-shadow:none;
}
button .icon {
    background: #0A62C4;
    font-size: 1.1em;
    left: 0; width: 40px
}
 

HTML -
-

Código:

<a href="#" class="btn btn-green"> Baixar SA:MP</a>
<a href="#" class="btn btn-green"> Jogar</a>
<a href="#" class="btn btn-green"> Baixar GTA:SA</a>


Gostaria de colocar icones de download no "Baixar GTA:SA" "Baixar SA:MP"
Icone De Controle No "jogar"

Olá @Gabriel_Gamer,
O Senhor possui a Font Awesome instalada no seu fórum?


Aguardo uma resposta sua,
pedxz.

Ainda não

Vá aos Templates > Geral, edite o template: overall_header e localize a seguinte variável {CSS} em baixo da mesma adicione:

Código:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

E mude o seu código para:

Código:

<a href="#" class="btn btn-green"><i class="fa fa-download"></i> Baixar SA:MP</a>
<a href="#" class="btn btn-green"><i class="fa fa-gamepad"></i> Jogar</a>
<a href="#" class="btn btn-green"><i class="fa fa-download"></i> Baixar GTA:SA</a>

Não sou fundador do fórum, '-

Olá!
Aceda a: Painel de Controle Geral Fórum Configuração Descrição do site e cole o código.

Código:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

Cordialmente.

Código:

.btn{
  font-family: arial;
  font-size:14px;
  text-transform: uppercase;
  font-weight:700;
  border:none;
  padding:10px;
  cursor:pointer;
  display:inline-block;
  text-decoration: none;
  border-radius: 30px;
}
.btn-green{
  background: #0404B4;
  color:#fff;
  box-shadow:0 5px 0 #08088A;
}
.btn-green:hover{
  background:#0B0B3B;
  color:#fff;
  box-shadow:0 5px 0 #0B3B24;
  transform: scale(1.05);
}
.btn-green:active{
  position:relative;
  top:5px;
  box-shadow:none;
}
button .icon {
    background: #0A62C4;
    font-size: 1.1em;
    left: 0; width: 40px
}
 

Tem como dar um edit nas cores ou até na modelagem para ficar mais bonitinho, ela ta muito escura, as letras estão com links ai ficam escura, Baseada no meu forum http://bl-rpg.forumeiros.com/forum#