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
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
276 usuários online :: 5 usuários cadastrados, Nenhum Invisível e 271 Visitantes :: 1 Motor de busca

Connor R., Fou-Lu, Holkis, ruystguerra, William_iHarDz

[ Ver toda a lista ]


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

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 Sab 1 Out 2016 - 0:57

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 Sab 1 Out 2016 - 1:53, editado 1 vez(es)

Luiz~
Usuário destaque

Masculino
Inscrito dia : 23/04/2016
Mensagens : 813
Pontos Ativos : 1574

http://ajuda.forumeiros.com

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

Mensagem por Cepheus em Sab 1 Out 2016 - 1:05


Cepheus
Usuário destaque

Masculino
Inscrito dia : 21/03/2014
Mensagens : 512
Pontos Ativos : 2141

http://www.bestskins.net/

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

Mensagem por Luiz~ em Sab 1 Out 2016 - 1:20

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.

Luiz~
Usuário destaque

Masculino
Inscrito dia : 23/04/2016
Mensagens : 813
Pontos Ativos : 1574

http://ajuda.forumeiros.com

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

Mensagem por Cream em Sab 1 Out 2016 - 1:24

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!

Cream
Principal contribuidor
Principal contribuidor

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

http://ajuda.forumeiros.com

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

Mensagem por Luiz~ em Sab 1 Out 2016 - 1:29

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?

Luiz~
Usuário destaque

Masculino
Inscrito dia : 23/04/2016
Mensagens : 813
Pontos Ativos : 1574

http://ajuda.forumeiros.com

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

Mensagem por while em Sab 1 Out 2016 - 1:44

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.

while
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2851
Pontos Ativos : 4302

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 Sab 1 Out 2016 - 2:41

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

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

Cream
Principal contribuidor
Principal contribuidor

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

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