Ícone Modelos HTML

Modelos HTML de ícones prontos a usar

É fácil encontrar pacotes de ícones e muitos são gratuitos. O que realmente consome tempo é construir os blocos ao redor deles, cartão após cartão, com um título e uma linha de texto sob cada símbolo. Os modelos HTML de ícones eliminam essa tarefa. Recebe secções em HTML prontas a editar, onde os ícones já estão inseridos em esquemas de página finalizados.

Quatro formas de associar um símbolo ao texto

A maioria dos modelos aqui apresentados baseia-se em algumas disposições, cada uma adequada a um tipo de conteúdo:

• um ícone acima de um título: o clássico cartão de destaque para uma linha de vantagens curtas;
• um ícone ao lado de um parágrafo: mais fácil de ler quando cada item necessita de uma ou duas frases explicativas;
• uma grelha de células com ícones para apresentação de serviços, muitas vezes com um botão sob cada descrição;
• uma linha de contactos onde um pequeno símbolo acompanha cada número ou endereço.

Certos serviços não possuem um símbolo óbvio. A entrega fica com uma carrinha e o suporte com auscultadores, mas o planeamento fiscal costuma receber um ícone genérico de documento, cabendo ao título a explicação principal. As informações de contacto atribuem ao ícone uma função mais prática. Com o recurso Ícone no Texto do Nicepage, o ícone surge dentro de uma linha de texto e pode direcionar diretamente para um número de telefone ou endereço de e-mail.

Do conteúdo de demonstração ao código exportado

No editor do Nicepage, pode substituir os ícones de demonstração pelos seus próprios ficheiros ou por opções integradas no sistema. Depois, basta reescrever os títulos e definir o destino de cada link. Após a exportação, os ficheiros HTML continuam disponíveis para edição direta, permitindo que um programador troque um ficheiro SVG, ajuste a estrutura do código ou incorpore uma secção num projeto já existente.

Um mesmo esquema de cartões pode apresentar serviços numa página e etapas de integração noutra. Apenas o ícone, o título e o texto de cada cartão mudam. As secções são responsivas, garantindo que uma sequência de cartões se reorganize adequadamente em ecrãs móveis sem perder a clareza dos símbolos.

Contar os elementos antes de avançar

Comece por avaliar os seus itens reais e a extensão de texto que cada um exige. Uma grelha planeada para vantagens breves parecerá desajustada se um dos cartões precisar de um parágrafo longo, e um bloco de contactos estruturado para três canais deixará um espaço em branco caso utilize apenas dois. Defina com antecedência se os itens precisam de um link ou de um botão, pois forçar a sua inclusão num cartão compacto raramente produz um bom resultado visual. Para uma listagem simples de vantagens, uma lista de ícones com marcadores em SVG pode ser suficiente. Como uma secção exportada pode ser integrada num projeto preexistente, pode perfeitamente escolher um modelo apenas por um bom bloco de contactos ou serviços e dispensar o restante.