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
» Tradução dos mini-jogos
Hoje à(s) 21:52 por juleic1123

» Widget Últimos Assuntos
Hoje à(s) 20:00 por Roger_Crazzy

» Duvida Sobre Janela
Hoje à(s) 19:50 por Isuareru

» Topo da Página
Hoje à(s) 18:45 por Cooper

» Adição de setas e menu dropdown ao widget
Hoje à(s) 16:08 por juleic1123

» Widget em forma de Slide
Hoje à(s) 15:46 por EDU2010

» Apresentação dos membros (fale sobre você)
Hoje à(s) 5:07 por Joah

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
221 usuários online :: 7 usuários cadastrados, 1 Invisível e 213 Visitantes :: 1 Motor de busca

cocas20, hamesashek, Holkis, iPlayer, juleic1123, Roger_Crazzy, Walcott

[ 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)
avatar

Luiz~
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 23/04/2016
Mensagens : 2440
Pontos Ativos : 3283

http://1forum1.forumeiros.com/

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

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

avatar

Cepheus
Usuário destaque

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

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

Luiz~
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 23/04/2016
Mensagens : 2440
Pontos Ativos : 3283

http://1forum1.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!
avatar

Cream
Principal contribuidor
Principal contribuidor

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

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?
avatar

Luiz~
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 23/04/2016
Mensagens : 2440
Pontos Ativos : 3283

http://1forum1.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.
avatar

while
Hiperativo

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

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

Cream
Principal contribuidor
Principal contribuidor

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

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