Pagina inicial
- 15 de fevereiro de 2015 A atualização mais recente do Beaver Builder traz um recurso poderoso que estou muito animado para demonstrar para você hoje. Além do Font Awesome, dos Foundation Icons do Zurb e dos Dashicons do WordPress, agora você pode criar suas próprias fontes de ícones com Icomoon ou Fontello e carregá-las para usar diretamente na interface do Beaver Builder. Nenhuma codificação necessária!
Nesta demonstração, vou usar o aplicativo Icomoon, mas os passos devem ser semelhantes se você optar pelo Fontello. Para começar, visite o site Icomoon e clique no grande botão Icomoon App no canto superior direito.
Ao iniciar o aplicativo Icomoon, você será saudado com uma seleção de ícones gratuitos que você pode selecionar para criar sua fonte. Se precisar de algo diferente do que é oferecido lá, você pode fazer upload de seus próprios ícones ou adicionar outros de suas bibliotecas gratuitas e premium.
Quando terminar de criar sua seleção, você poderá gerar uma nova fonte de ícone para download clicando na guia Gerar fonte no canto inferior direito.
Na tela Gerar fonte, você será saudado com sua seleção de ícones, bem como uma série de maneiras de ajustar as configurações de sua fonte antes de baixá-la. As configurações padrão normalmente são boas, mas há uma em particular que você deve alterar se planeja fazer upload de várias fontes de ícones. Essa configuração é acessada clicando no botão Preferências no cabeçalho e é intitulada Class Prefix .
A configuração Class Prefix é o que ajuda a identificar seus ícones na página quando adicionados a um layout do Beaver Builder. Se não for alterado, várias fontes de ícones usando o prefixo icon- entrarão em conflito, fazendo com que algumas sejam exibidas incorretamente no seletor de ícones do Beaver Builder. Você pode alterar essa configuração para qualquer coisa que desejar, como my-icon1- ou my-icon2-, mas o mais importante é que ela foi alterada.
Você também pode alterar a configuração do nome da fonte para identificar facilmente a fonte do seu ícone personalizado no seletor de ícones do Beaver Builder (escolher um nome personalizado para Fontello é obrigatório). Quando terminar de ajustar as configurações, clique no botão Download no canto inferior direito e prepare-se para enviar sua nova fonte de ícone para o Beaver Builder!
Para fazer upload da fonte do seu ícone personalizado para o Beaver Builder, faça login no seu site WordPress e navegue até Configurações > Construtor de páginas > Ícones. A partir daí, clique no botão Carregar conjunto de ícones e carregue o arquivo zip que você baixou do Icomoon usando o uploader de mídia nativo do WordPress. Depois disso, selecione o arquivo zip carregado e clique no botão Selecionar arquivo para adicionar sua fonte de ícone personalizada ao Beaver Builder. A página será atualizada e a fonte do seu ícone personalizado agora estará visível na lista de fontes de ícone do Beaver Builder disponíveis, semelhante à imagem abaixo.
Além de enviar suas próprias fontes de ícone personalizadas, também oferecemos a você a capacidade de gerenciar quais conjuntos estão ativados ou desativados no Beaver Builder ou excluir completamente uma fonte de ícone personalizada que você carregou. Este é um ótimo recurso para aqueles que desejam limitar a seleção de fontes de ícones disponíveis para seus próprios conjuntos personalizados ou manter a seleção simples para clientes que irão editar páginas usando o Beaver Builder.
Desativar fontes de ícones é relativamente fácil. Basta desmarcar as fontes dos ícones que deseja desativar (ou marcar aquelas que deseja ativar) e clicar no botão Salvar configurações do ícone . Para excluir uma fonte de ícone personalizada que você carregou, basta clicar no link Excluir próximo ao nome da fonte do ícone que deseja excluir.
As fontes dos ícones são incríveis e podem realmente ajudar a incrementar o conteúdo do seu site, mas você precisa ter cuidado. Só porque você tem acesso a vários conjuntos de fontes de ícones não significa que você deva usá-los todos na mesma página. Por que não? Velocidade de carregamento da página!
Digamos que você adicionou ícones do Font Awesome e do Foundation na mesma página. Para renderizar esses ícones, o Beaver Builder precisará carregar a folha de estilo e os arquivos de fonte do Font Awesome e do Foundation, adicionando tempo de carregamento à sua página. Em vez de usar várias fontes de ícones na mesma página, tente o seu melhor para mantê-las em uma ou, melhor ainda, para obter os melhores resultados, crie sua própria fonte de ícones apenas com os ícones necessários e use-a!
Esperamos que você goste deste novo recurso e o considere uma adição útil à sua caixa de ferramentas do Beaver Builder. Como sempre, se você tiver alguma dúvida ou feedback, sinta-se à vontade para nos informar nos comentários abaixo. Aproveitar!
Crédito da imagem: Thomas S.
em 17 de fevereiro de 2016 às 10h12Olá, Sammy. Confira a seção nesta postagem em “Carregando a fonte do seu ícone para o Beaver Builder”
Você pode fazer isso facilmente nas configurações do construtor de páginas!
em 1º de março de 2016 às 13h03usando ftp, onde é o local exato para adicionar um conjunto de ícones para que o construtor beaver o reconheça, sem passar pelas configurações do construtor de páginas
em 2 de março de 2016 às 10hInfelizmente, não tenho certeza se isso funcionará, mas você pode tentar. A pasta está em /wp-content/uploads/bb-plugin/icons/. Deixe-nos saber como foi
em 27 de abril de 2016 às 5h32Não, não funciona. Quando você considera o tamanho dos pacotes de ícones. A transferência FTP seria ótima.
em 10 de novembro de 2016 às 6h17Fiz exatamente o que você disse e está funcionando! MAS os ícones do Beaverbuilder nos menus de edição desapareceram. ALGUMA solução para fazê-los voltar?
em 18 de novembro de 2016 às 23h01Olá Marco! Desculpe pelo problema. Você pode nos enviar um e-mail sobre isso: http://www.wpbeaverbuilder.com/support/
em 25 de abril de 2017 às 12h16Posso usar esses ícones com o editor de texto wordpress? Existem eplugins para isso, mas acho que o BB está interferindo nisso e em um post não consigo iniciar o BB, só páginas certo?
Obrigado!
em 26 de abril de 2017 às 10h33Você teria que carregar a fonte do ícone em seu tema ou em um plugin para usá-los no editor do WordPress. O Beaver Builder só carregará a fonte quando ela estiver sendo usada em uma página.
em 2 de junho de 2017 às 7h15 Olá, Justin, ótimo artigo! Talvez você possa me ajudar? =)
Usei esta linha do código “-o-transform: scale(1);” dimensionar meus ícones no Opera corretamente, mas isso não me ajudou. Talvez seja especificamente por causa desses ícones que estou usando – https://mobiriseicons.com/
É possível que algo esteja errado com eles? O que você acha? E obrigado pelo seu tutorial!
em 2 de junho de 2017 às 14h09Olá, Ben. Não estou familiarizado com essa técnica do Opera. Onde você leu sobre isso?
em 6 de junho de 2017 às 2h28https://designmodo.com/use-icon-fonts/
em 6 de junho de 2017 às 16h18Interessante. Não sei por que isso está causando o problema, mas meu palpite é que talvez o trecho de código e o conselho estejam desatualizados. A maioria dos navegadores tornou muito mais fácil o uso de fontes da web. É possível que a técnica de transformação/escala não seja mais necessária?
em 26 de maio de 2021 às 12h42Quero adicionar o código personalizado do Icon sem usar iconmoon ou fontello. Como posso adicionar?
em 27 de maio de 2021 às 11h04Olá, muito obrigado pela sua pergunta. IcoMoon é a opção mais fácil; entretanto, se preferir não usar IcoMoon ou Fontello, você precisará baixar o ícone SVG e adicioná-lo à biblioteca de mídia WP do seu site. A partir daqui você poderá selecioná-lo no módulo Foto. Espero que isso ajude!
Nosso boletim informativo é escrito pessoalmente e enviado uma vez por mês. Não é nem um pouco chato ou spam.
Nós prometemos.
Gostaria de usar ícones de outros “conjuntos de ícones” diferentes daqueles que acompanham o BB ou dos sites mencionados acima. Como faço isso?