Colocar ícones CSS

Item: Colocar ícones CSS
Rating: 1

por Vados 11.12.15 18:20

Detalhes da questão

Endereço do fórum: http: http://webgrafic.forumeiro.com/
Versão do fórum: PunBB

Descrição

Gostaria de saber se era possível colocar estes ícones:
- http: http://astronautweb.co/snippet/font-awesome/

Nas barras das categorias e dos widgets, algo assim:
Colocar ícones CSS 34qpik2

por Slurk 11.12.15 18:25

Talvez seja possível sim, e ta bem explicado como se faz nessa url que você passou, sua questão era só saber se é possível?

por Vados 11.12.15 18:26

Eu consegui colocar nos botões (Novo Tópico, Responder, Bloqueado) mas agora nas barras dos widgets e categorias não, não sei qual o código que tenho de usar para tal.

por Harleen 11.12.15 21:37

Boa noite @Vados
no painel de controle vá em Visualização> Templates> Geral > overall_header depois da tag <head> adicione este código

Código:: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

salve e publique. Positivo

por Vados 11.12.15 21:40

Sim isso eu já tenho, pois como disse já os utilizo, apenas gostava de saber agora como colocar nos Widgets e nos títulos das Categorias.

por Harleen 11.12.15 22:19

Para as categorias adicione entre o nome das categorias.
exemplo

Código:: <span class="cat1">GERAL WEBGRAFIC</span>

e assim por diante... escolha os ícones no site e em seu css e adicione

Código:: .cat1:before { content: "\f000"; font-family: FontAwesome; vertical-align:top; }

Para os widgets só sei inserindo nos templates...

por Vados 11.12.15 22:21

Para as categorias perfeito, mas para os Widgets da maneira que sabe é sempre igual para todos?

por Harleen 11.12.15 23:03

Para os widgets eu coloquei em cada template, por exemplo, no widget de votação, em meu fórum inseri dessa forma.

Código:: <div class="module main"> <div class="main-head"> <a name="sondage"></a> <div class="h3"><i class="fa fa-bar-chart" style="color: red;"></i> {L_POLL}</div> </div> <div class="main-content"> {POLL_DISPLAY} </div> </div>

o código em negrito é onde personalizei... se quiser fazer dessa forma, informe quais widgets ira personalizar.
caso deseja manter os templates padrão, aguarde outra pessoa para lhe auxiliar...

por Vados 11.12.15 23:05

Pois eu irei utilizar também os widgets de padrão, mas caso crie um widget personalizado, utilizo esse código para tal?

por Harleen 11.12.15 23:19

Eu estava editando a mensagem para indicar esse código

Código:: <i class="fa fa-bar-chart" style="color: red;"></i>

Neste caso aconselho aguardar um ajudeiro ou um membro mais experiente, pois do modo que eu fiz,
você irá de perder posteriormente... nos widgets personalizados como neste
Colocar ícones CSS Captur11

Eu inseri no início

Código:: <div class="module main"> <div class="module"> <div class="main-head"> <em style="color:red;" class="fa fa-play-circle-o"></em> TOP 5 ÁLBUNS - ANOS 2000 </div>

Mas como você deseja manter os templates padrão, mais uma vez, recomendo que aguarde alguém mais experiente para lhe auxiliar.

por Vados 11.12.15 23:25

Só não estou a perceber uma coisa, nos widgets personalizados, você utiliza os códigos aonde mesmo? Em que templates edita?

por Harleen 11.12.15 23:34

Nos Widgets personalizados eu crio dessa forma

Spoiler:

Deixando em branco o Utilizar um table type e o Título do widget, dessa forma resulta na imagem do post acima.

por Vados 11.12.15 23:40

Poderia passar esse seu códigos só para testar uma coisa? Tive a tentar mas o texto não está a ficar dentro das caixas.

por Harleen 11.12.15 23:58

Olá, use o bloco de notas, ou o que preferir e faça da seguinte forma, insira esse código

Código:: <div class="module main"> <div class="main-head"> <div class="h3"> título do widget </div> </div> <div class="main-content clearfix"> conteúdo do widget </div> </div>

quando crio um widget personalizado, sempre uso essa estrutura.

por Vados 12.12.15 0:28

Agora sim consegui obrigado, agora irei esperar por alguém que me diga como fazer nos de padrões

por Vados 13.12.15 2:59

por Vados 14.12.15 11:50

por Shek 15.12.15 13:47

Olá!

No caso você quer definir um padrão para cada tipo de estrutura? Ou seja, nas categorias, um ícone específico, nos widgets, um ícone específico? Eu aconselho, até mesmo a você @Harleen a não usar o span para definir os ícones. Prefira usar o <i class="fa fa-NOME"></i>. Ele não desalinha qualquer elemento do seu HTML. Piscada

Autor, me deixe saber da sua preferência.

por Vados 15.12.15 17:52

Eu basicamente queria era mudar os widgets padrões, se reparar:
- http: http://webgrafic.forumeiro.com/

Os widgets personalizados consegui com a ajuda da Harleen, mas os de padrão como o de últimos assuntos queria colocar o ícone atrás ou seja como os personalizados, só que não consigo fazer isso na gestão dos widgets

por Shek 15.12.15 23:06

Já tentou editar o template mod_recent_topics em Visualização > Templates >> Portal ?

por Vados 16.12.15 0:08

Sim já fui lá mas qual é o código ou class em que podemos modificar para outro título? É que por exemplo em "Últimos Assuntos" tentei procurar e não encontrei.

por Harleen 16.12.15 13:00

Olá insira o ícone que deseja depois do div class="h3", ficando dessa forma

Os mais ativos do mês:

para os últimos assuntos procure por

Código:: <div class="main-head"><h3>{L_RECENT_TOPICS}</h3></div>

e também adicione o ícone entre o "h3".

Espero ter explicado certo Muito feliz

por Vados 16.12.15 17:50

Agora sim percebi bem, obrigado a ambos! ^^

Colocar ícones CSS