ícones em css

Detalhes da questão

Endereço do fórum: http://vgnfamily.forumais.com
Versão do fórum: PunBB

Descrição

Olá.

Então eu botei o mesmo efeito no tópico do iScroll. Link: https://ajuda.forumeiros.com/t108497-
Adicionei este código, na descrição do sub-fórum:

Código:

<div class="topic-ball"><i class="fa fa-envelope-open-o"></i></div>

E este código em meu css:

Código:

.topic-ball i.fa {  font-size: 19px;  background: #232323;  display: block;  width: 40px;  height: 40px;  line-height: 40px;  text-align: center;  border-radius: 6px 6px;  border: 1px solid #333;  color: #555;  transition: all 0.7s ease-in-out;  float: left;}.topic-ball i.fa:hover {  color: #fff;  cursor: pointer;  border-radius: 50px;  box-shadow: 0px -40px 0px #2b975f inset;}

Resultado: https://i.imgur.com/WgECc9Y.jpg

É possível eu por o ícone no lugar da imagem, onde está escrito "Regras Gerais"? Até mais.

Olá,

Adicione este CSS:

Código:

.topic-ball {
  position: static!important;
  float: left!important;
}

Todavia, para que funcione perfeitamente, o senhor terá que retirar as imagens.

Certo mais 3 coisas se for possível.

1° Teria como mover o ícone para onde está marcado de vermelho, no lugar do outro?

2° É possível deixar o formato do ícone, redondo? ficar verde só quando passar o mouse?


3° Como faço para mudar o ícone?

Olá,

Para colocar o ícone no lugar da imagem, adicione este código:

Código:

h3.hierarchy ~ img {
  display: none;
}

.topic-ball i.fa {
  color: #fff!important;
  border-radius: 9em!important;
  position: absolute;
  top: calc(50% - 19px);
  left: 12px;
}

h3.hierarchy {
  margin-left: 61px!important;
}

h3.hierarchy ~ span {
  margin-left: 61px!important;
}

td.tcl {
  position: relative;
}

Para mudar o ícone, faça o seguinte:
Note que o código que o senhor colocou é:

Código:

<div class="topic-ball"><i class="fa fa-envelope-open-o"></i></div>

Certo? Nele, há este trecho:

<i class="fa fa-envelope-open-o"></i>

. Basta acessar o site da Font Awesome, e escolher o ícone que quer, e substituir por

<i class="fa fa-envelope-open-o"></i>

.

Deu certo. Obg! Pode fechar.