Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Barra de Categorias
Hoje à(s) 8:08 por Claudio Arthur

» Avatar Gif
Hoje à(s) 5:12 por [K]oke

» Notificações
Hoje à(s) 2:22 por Luiz~

» Alinhamento botão curtir
Ontem à(s) 21:31 por Luiz~

» Remover a tag da página inicial do fórum
Ontem à(s) 20:27 por Luiz~

» Tipos de layout e ativação através de perfil de usuário
Ontem à(s) 18:47 por Harleen

» Correção codigo aparecer abaixo do avatar
Ontem à(s) 17:41 por Luiz~

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Luiz~
 
Harleen
 
Shek
 
Kenno LP
 
Kyo Panda
 
Ramon Rodrigues
 
Flames
 
Holkis
 
Blackfyre
 
wlweslley
 

Quem está conectado
229 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 228 Visitantes :: 2 Motores de busca

ThallesAmagami

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

ícones em css

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido ícones em css

Mensagem por YouTube3 em Dom 2 Abr 2017 - 1:01

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: http://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: http://i.imgur.com/WgECc9Y.jpg

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


Última edição por YouTube3 em Dom 2 Abr 2017 - 22:50, editado 1 vez(es)
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1051
Pontos Ativos : 1496

http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: ícones em css

Mensagem por Luiz~ em Dom 2 Abr 2017 - 1:09

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. Feliz

Tchau


Luiz~Ajudeiro - Fórum dos Fóruns


Regras do Fórum | Staff | Diretrizes
Perguntas Frequentes | Tutoriais
Ferramentas do Administrador
avatar

Luiz~
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 23/04/2016
Mensagens : 2929
Pontos Ativos : 3671

https://github.com/lffg/fdf/

Resolvido Re: ícones em css

Mensagem por YouTube3 em Dom 2 Abr 2017 - 3:06

Certo mais 3 coisas se for possível.

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

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


Como faço para mudar o ícone?
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1051
Pontos Ativos : 1496

http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: ícones em css

Mensagem por Luiz~ em Dom 2 Abr 2017 - 14:03

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>
. Piscada

Tchau


Luiz~Ajudeiro - Fórum dos Fóruns


Regras do Fórum | Staff | Diretrizes
Perguntas Frequentes | Tutoriais
Ferramentas do Administrador
avatar

Luiz~
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 23/04/2016
Mensagens : 2929
Pontos Ativos : 3671

https://github.com/lffg/fdf/

Resolvido Re: ícones em css

Mensagem por YouTube3 em Dom 2 Abr 2017 - 22:50

Deu certo. Muito feliz Obg! Pode fechar.
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1051
Pontos Ativos : 1496

http://Ajuda.Forumeiros.com

Resolvido Re: ícones em css

Mensagem por Luiz~ em Seg 3 Abr 2017 - 1:03

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".


Luiz~Ajudeiro - Fórum dos Fóruns


Regras do Fórum | Staff | Diretrizes
Perguntas Frequentes | Tutoriais
Ferramentas do Administrador
avatar

Luiz~
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 23/04/2016
Mensagens : 2929
Pontos Ativos : 3671

https://github.com/lffg/fdf/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum