Ícones de categoria do fórum em CSS

Item: Ícones de categoria do fórum em CSS
Rating: 1

por Matheus Herzog 05.05.17 7:29

Detalhes da questão

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

Descrição

Olá, eu tentei seguir esse tutorial > https://ajuda.forumeiros.com/t108497-icone-em-css

Mas o meu só fica desta forma: http://prntscr.com/f4ba0g
E como faço pra por uma imagem dentro ?
Desde já, agradeço.

por Kyo Panda 05.05.17 12:28

Os ícones precisam deste tutorial para aparecer. Já o posicionamento precisará ser configurado manualmente e, para isso, precisaríamos que liberasse o fórum para visitantes. o/

por Matheus Herzog 05.05.17 23:03

Pronto, já deixei o fórum liberado para convidados.. Poderia me informar melhor como eu instalo esse Font Awesome ? Não entendi muito bem no tutorial.

por Luiz 05.05.17 23:08

Crie um novo JS com investimento em todas as páginas com o código:

Código:: (function ($) { 'use strict'; $(function () { $([ '', '<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />', ].join('\n')) .prependTo('head') ; }); }(jQuery));

Feito isso, a fonte em questão será instalada.

o/

por Matheus Herzog 05.05.17 23:09

Eu consegui ativar o ícone lá, mas como eu faço para trocar ele e alinhar corretamente ?

por Luiz 05.05.17 23:13

Olá,

Para alinhas, aceda à:
Painel de Controle -> Visualização -> Cores -> Folha de Estilo CSS.

Adicione o código ao final da caixa de texto:

Código:: .forabg dl.icon { background-image: none!important; position: relative; } .topic-ball i { position: absolute; top: 50%; transform: translateY(-50%); left: 25px; }

---

Já para mudar o ícone, acesse o site da FontAwesome, e procure o ícone que desejar.
O senhor tem o código:

Código:: <div class="topic-ball"> <i class="fa fa-envelope-open-o" aria-hidden="true"></i> </div>

Basta modificar o

pelo outro ícone que o senhor quiser.

o/

por Matheus Herzog 05.05.17 23:16

Alguns ficaram desta forma, olhe: http://prntscr.com/f4m0al

por Luiz 05.05.17 23:17

Peço que o senhor ative uma conta que eu acabei de criar para que eu possa ver o que se passa. Visto que os subfóruns são bloqueados à membros do fórum.

por Matheus Herzog 05.05.17 23:19

Pronto, conta ativada.

por Luiz 05.05.17 23:21

Poderia anexar aqui sua Folha de Estilos CSS?

o/

por Matheus Herzog 05.05.17 23:22

.postprofile {
text-align: center;
}

div.postprofile {
border: 1px solid #3793ff !important;
background-color: #fff !important;
margin-right: 10px !important;
margin-top: 27px !important;
}

.postprofile-avatar img {
border-radius: 0px!important;
}
.topic-ball i.fa {
font-size: 19px;
background: #e9ebed;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 6px 6px;
border: 1px solid #e9ebed;
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 #3793FF inset;
}
.forabg dl.icon {
background-image: none!important;
position: relative;
}

.topic-ball i {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 25px;
}

por Luiz 05.05.17 23:24

Olá,

O problema é que o código distingue o

<i>

do

<em>

, que tem a mesma função.
Troque por:

Código:: .postprofile { text-align: center; } div.postprofile { border: 1px solid #3793ff !important; background-color: #fff !important; margin-right: 10px !important; margin-top: 27px !important; } .postprofile-avatar img { border-radius: 0px!important; } .forabg dl.icon { background-image: none!important; position: relative; } .topic-ball i.fa, .topic-ball em.fa, { font-size: 19px; background: #e9ebed; display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 6px 6px; border: 1px solid #e9ebed; color: #555; transition: all 0.7s ease-in-out; float: left; position: absolute; top: 50%; transform: translateY(-50%); left: 25px; } .topic-ball i.fa:hover, .topic-ball em.fa:hover { color: #fff; cursor: pointer; border-radius: 50px; box-shadow: 0px -40px 0px #3793FF inset; }

o/

por Matheus Herzog 05.05.17 23:29

Olha como ficou Luiz, todos pequenos. Eu tento modificar de <em> para <i> mas não muda, sempre volta pra <em>..

por Matheus Herzog 05.05.17 23:41

por Luiz 05.05.17 23:46

Ícones de categoria do fórum em CSS Warnin10

Atenção!

Você não pode fazer UPs antes de se completar 24 horas desde a última mensagem deste tópico! Por este motivo, nós pedimos que você leia as regras do subfórum e principalmente os termos de uso do FdF: https://ajuda.forumeiros.com/t82-topic para não cometer novos erros!

---

Desculpe, erro meu.
Troque por:

Código:: .postprofile { text-align: center; } div.postprofile { border: 1px solid #3793ff !important; background-color: #fff !important; margin-right: 10px !important; margin-top: 27px !important; } .postprofile-avatar img { border-radius: 0px!important; } .forabg dl.icon { background-image: none!important; position: relative; } .topic-ball .fa { font-size: 19px; background: #e9ebed; display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 6px 6px; border: 1px solid #e9ebed; color: #555; transition: all 0.7s ease-in-out; float: left; position: absolute; top: 50%; transform: translateY(-50%); left: 25px; } .topic-ball .fa:hover { color: #fff; cursor: pointer; border-radius: 50px; box-shadow: 0px -40px 0px #3793FF inset; }

o/

por Matheus Herzog 05.05.17 23:48

Luiz, eu consegui por do jeito que eu queria. Mas, como eu faço pra deixar as imagens em um tamanho maior ?

por Luiz 06.05.17 0:10

Adicione este CSS ao final da Folha:

Código:: .topic-ball .fa { font-size: 22px; }

E altere o valor

22px

à seu gosto.

o/

por Matheus Herzog 06.05.17 0:13

Não está mudando Triste

por Luiz 06.05.17 0:16

Troque por:

Código:: .topic-ball .fa { font-size: 22px!important; }

o/

por Matheus Herzog 06.05.17 0:18

Agora sim! Você é um DEEEEEEEEEEEEUS Luiz, muito obrigado. Pode fechar <3

por Luiz 06.05.17 0:19

Disponha. Estamos aqui para ajudar. Rosa

---

Ícones de categoria do fórum em CSS Symbol10

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

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

Ícones de categoria do fórum em CSS