Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

como adicionar um ícone customizado?

tenho enfrentado uma questão...quando os ícones providos pelo bootstrap nao me atendem como posso fazer para inserir um outro ícone externo que tenha baixado ?

4 respostas

Vinicius, você pode fazer inserindo as imagens em um link. Pode usar a técnica image replacement, abordada no Curso HTML5 e CSS3 I: Suas primeiras páginas da Web (https://cursos.alura.com.br/course/introducao-html-css).

Abraço.

solução!

Oi Vinicius!

Vc pode fazer o seguinte:

1) Baixa o arquivo do seu ícone ( pode ser .png, .jpg e etc )

2) Vai no CSS e cria o seletor pra tag q vc queira colocar esse ícone, por exemplo:

.minhaTag {

}

3) Coloca um background-image pra esse link no seletor. O código deve ficar algo do tipo:

.minhaTag {
  background-color(assets/img/meuIcone.png);
}

Agora só faltaria vc posicionar e ajeitar esse ícone com CSS mesmo, vc pode usar as seguintes propriedades:

background-position
background-size

Pronto! É isso! Não esquece de colocar a classe na tag que vc quer!

Espero ter ajudado, abraços.

valeu yuri....iniciei o curso! valeu a dica do código tbm..estou tentando corrigir o erro. Dever ser algo referente ao thymeleaf + bootstrap!!

abraços!

vou marcar como solução visto que nao é algo exclusivamente relacionado ao curso!

até!