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
» Como fazer sub entrada?
Hoje à(s) 02:04 pm por Czins

» Como ocultar iframe de um tópico para visitantes
Hoje à(s) 01:46 pm por Luiz

» MP para administradores
Hoje à(s) 01:42 pm por Luiz

» Como trasnferir um site do wix para forumeiros?
Hoje à(s) 01:21 pm por Luiz

» Caixa de Login
Hoje à(s) 01:20 pm por iScroll

» Personalizar cabeçalho
Hoje à(s) 01:12 pm por iScroll

» Personalizar posts
Hoje à(s) 11:00 am por Harleen

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
APOllO
 
odelgado
 
Kyko
 
mrvisible
 
Luiz
 
iScroll
 
Shek
 
rlmac
 

Quem está conectado
290 usuários online :: 8 usuários cadastrados, 1 Invisível e 281 Visitantes :: 2 Motores de busca

alexandro.tadeu, Czins, iScroll, Kyo Panda, Luiz, odelgado, Pedxz, Shek

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Botão com ícones do font awesome

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

Resolvido Botão com ícones do font awesome

Mensagem por Luiz em 30/09/16, 08:57 pm

Detalhes da questão


Endereço do fórum: rhc-forumteste.forumeiros.com/
Versão do fórum: PhpBB3

Descrição


Olá, gostaria de saber como faço esse menu de ícones.
Observação: Somente para administradores usarem.



Última edição por luuuiiiz em 30/09/16, 09:53 pm, editado 1 vez(es)
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3752
Pontos Ativos : 4440

https://github.com/lffg/

Resolvido Re: Botão com ícones do font awesome

Mensagem por Cepheus em 30/09/16, 09:05 pm

avatar

Cepheus
Usuário destaque

Masculino
Inscrito dia : 21/03/2014
Mensagens : 514
Pontos Ativos : 1085

http://www.bestskins.net/

Resolvido Re: Botão com ícones do font awesome

Mensagem por Luiz em 30/09/16, 09:20 pm

bom, eu gostaria de um que só tem os da font-awesome (e todos), que nem na print.
eu vi aquele efeito no fórum de suporte inglês.
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3752
Pontos Ativos : 4440

https://github.com/lffg/

Resolvido Re: Botão com ícones do font awesome

Mensagem por Cream em 30/09/16, 09:24 pm

Olá,

Crie um novo javascript com investimento em todas as páginas:
Código:
        $(function(){
          if (!$.sceditor) return;
          var defaultSize = 18, // default icon size
              autoClose = 1, // closes drop down after an icon is clicked, if enabled
       
              // icon list
              fa = ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
              A = '', O = A;
       
          // if the size is above 0 we'll format a default size for the icons
          if (defaultSize) {
            A += '[size=' + defaultSize + ']';
            O += '[/size]';
          }
       
          // create sceditor button and drop down
          $.sceditor.command.set('fontawesome', {
         
            dropDown : function(editor, caller, callback) {
              var a, b = '', c = document.createElement('DIV'), i = 0, j = fa.length;
           
              for (; i<j; i++) b += '<i class="fa">' + fa[i] + '</i>';
           
              c.innerHTML = b;
           
              for (a = c.getElementsByTagName('I'), i = 0, j = a.length; i<j; i++) {
                a[i].onclick = function() {
                  callback(this.innerHTML);
                  autoClose && editor.closeDropDown(true);
                };
              }
       
              editor.createDropDown(caller, 'fontawesome', c);
            },
       
            // wysiwyg
            exec : function(c) {
              var e = this;
              $.sceditor.command.get('fontawesome').dropDown(e, c, function(icon) {
                e.insert('&nbsp;[font=FontAwesome]' + A + icon + O + '[/font]&nbsp;', '', true, true, true);
              });
            },
         
            // source
            txtExec : function(c) {
              var e = this;
              $.sceditor.command.get('fontawesome').dropDown(e, c, function(icon) {
                e.insert(' [font=FontAwesome]' + A + icon + O + '[/font] ', '');
              });
            },
         
            tooltip : 'Font Awesome Icons'
          });
       
          toolbar = toolbar.replace(/date,/,'fontawesome,date,'); // add the button to the toolbar
        });

Adicione também no seu CSS:
Código:
        /* Add fontawesome to textarea font-family so the icons are visible */
        .sceditor-container textarea { font-family:Verdana, Arial, Helvetica, sans-serif, FontAwesome !important }
        /* button image */
        .sceditor-button-fontawesome div { background:url(http://i19.servimg.com/u/f19/19/06/98/92/fa-f10.png) !important }
       
        /* drop down */
        .sceditor-fontawesome {
          width:220px;
          height:250px;
          overflow-y:auto;
        }
       
        /* icons */
        .sceditor-fontawesome i {
          color:#333;
          font-size:20px;
          text-align:center;
          cursor:pointer;
          padding:3px 0;
          width:25%;
        }
        .sceditor-fontawesome i:hover { color:#666 }

Até mais!
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11637

http://ajuda.forumeiros.com

Resolvido Re: Botão com ícones do font awesome

Mensagem por Luiz em 30/09/16, 09:29 pm

muito obrigado, funcionou! Feliz

mas...
como faço para colocar o botão dentro daqueles 3 pontinhos?
aqueles que ao clicar aparecem botões adicionais?
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3752
Pontos Ativos : 4440

https://github.com/lffg/

Resolvido Re: Botão com ícones do font awesome

Mensagem por while em 30/09/16, 09:44 pm

Olá autor,

Não entendi, para isto parecer os botões é obrigatório você ter o fontawesome instalado no seu fórum, veja esse tópico para saber como instalar: http://ajuda.forumeiros.com/t103208-

Troque o código JS por este:

Código:
              $(function(){
if (_userdata.user_level >= 1) {
          if (!$.sceditor) return;
          var defaultSize = 18, // default icon size
              autoClose = 1, // closes drop down after an icon is clicked, if enabled
       
              // icon list
              fa = ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
              A = '', O = A;
       
          // if the size is above 0 we'll format a default size for the icons
          if (defaultSize) {
            A += '[size=' + defaultSize + ']';
            O += '[/size]';
          }
       
          // create sceditor button and drop down
          $.sceditor.command.set('fontawesome', {
         
            dropDown : function(editor, caller, callback) {
              var a, b = '', c = document.createElement('DIV'), i = 0, j = fa.length;
           
              for (; i<j; i++) b += '<i class="fa">' + fa[i] + '</i>';
           
              c.innerHTML = b;
           
              for (a = c.getElementsByTagName('I'), i = 0, j = a.length; i<j; i++) {
                a[i].onclick = function() {
                  callback(this.innerHTML);
                  autoClose && editor.closeDropDown(true);
                };
              }
       
              editor.createDropDown(caller, 'fontawesome', c);
            },
       
            // wysiwyg
            exec : function(c) {
              var e = this;
              $.sceditor.command.get('fontawesome').dropDown(e, c, function(icon) {
                e.insert('&nbsp;[font=FontAwesome]' + A + icon + O + '[/font]&nbsp;', '', true, true, true);
              });
            },
         
            // source
            txtExec : function(c) {
              var e = this;
              $.sceditor.command.get('fontawesome').dropDown(e, c, function(icon) {
                e.insert(' [font=FontAwesome]' + A + icon + O + '[/font] ', '');
              });
            },
         
            tooltip : 'Font Awesome Icons'
          });
       
          toolbar = toolbar.replace(/date,/,'fontawesome,date,'); // add the button to the toolbar
        }});

Restringi a visualização apenas para administradores (no SCeditor o botão só aparece a admins)

Até mais.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3105
Pontos Ativos : 4499

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Botão com ícones do font awesome

Mensagem por Cream em 30/09/16, 10:41 pm

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

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

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11637

http://ajuda.forumeiros.com

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