Neste tutorial, será mostrado como inserir novos ícones no seu projeto, após a importação e configuração dos ícones na IDE, será possível atribuir os novos ícones e utilizá-los nos componentes que possuem essa propriedade.
Pré-requisitos
Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.
Requisitos:
- Projeto do web criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link criar projeto;
- Habilitar a opção Modo Avançado.
Importando ícones ao projeto
Baixando pacote de ícone
Primeiramente, acesse um site que possua pacotes contendo ícones, geralmente ao baixar, ja vem zipado, no nosso exemplos usaremos o site useiconic por ser open source. Baixe o pacote zipado com os ícones, no nosso exemplo basta clicar em Download v1.1.0 (Figura 1).
Figura 1 - Baixando pacote de ícones
Importando arquivos para o projeto
Após baixar, extraia em uma pasta o arquivo zipado, iremos utilizar somente a pasta font, então poderá apagar as demais pastas do arquivo, após isso, importe para o endereço: src/main/webapp/css como mostrado na figura 1.1.
Figura 1.1 - Importando arquivos
- Clique sob a pasta css com o botão direito do mouse;
- Ponha o ponteiro do mouse em cima de Novo;
- Clique em Fazer Upload.