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


Pesquisa de Satisfação
Queremos saber a sua opinião sobre os nossos serviços. Clique nesta vinheta e preencha este inquérito.

Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Quem está conectado
96 usuários online :: 2 usuários cadastrados, Nenhum Invisível e 94 Visitantes :: 1 Motor de busca

Kyo Panda, Lincoln

[ 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 avançado

Masculino
Inscrito dia : 23/04/2016
Mensagens : 422
Pontos Ativos : 897

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 avançado

Masculino
Inscrito dia : 21/03/2014
Mensagens : 474
Pontos Ativos : 1972

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 avançado

Masculino
Inscrito dia : 23/04/2016
Mensagens : 422
Pontos Ativos : 897

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!


Seta Respeite as Regras do fórum e conheça a nossa equipe staff e diretrizes do FdF!
Seta Conheça a nossa Lista de tutoriais e nossa Lista de FAQs.
Seta Perdeu a senha de administração? Veja o que fazer.
Seta Ferramentas do Administrador.

Cream
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8373
Pontos Ativos : 13589

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 avançado

Masculino
Inscrito dia : 23/04/2016
Mensagens : 422
Pontos Ativos : 897

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 : 2819
Pontos Ativos : 4147

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


Seta Respeite as Regras do fórum e conheça a nossa equipe staff e diretrizes do FdF!
Seta Conheça a nossa Lista de tutoriais e nossa Lista de FAQs.
Seta Perdeu a senha de administração? Veja o que fazer.
Seta Ferramentas do Administrador.

Cream
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8373
Pontos Ativos : 13589

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
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5