Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Caminho para importar icones não está funcionando

Referente ao curso Guia de estilos: montando páginas com componentes

por Emilly Bezerra Miranda
| 111.1k xp | 3 posts
Estágiaria

Estou tentando importar os ícones da aula 4 e o caminho não está funcionando... já verifiquei as pastas, as classes no html e css e já importei o css no html... segue abaixo o css contendo o caminho que estou utilizando (que é o mesmo que o prof apresenta na aula e que esta o arquivo no meu notebook).

.item__icone--cursor{
    background-image: url(../../img/icones/mouse.svg);
}

.item__icone--carrinho{
    background-image: url(../../img/icones/cart.svg);
}

.item__icone--caminhao{
    background-image: url(../../img/icones/truck.svg);
}
5 respostas
por MARCELO FREDERICO SLABCOUSKI BRANCO GARCIA
| 131.7k xp | 156 posts
Instrutor de Informática

Bom dia Emilly,

Pelo caminho que está postando está mostrando que seus arquivos estão dentro de dois diretórios, ou seja pra chegar aos arquivos tenho que passar por duas pastas antes de chegar em img. Seu arquivo Index.html está no primeiro diretório e depois as sua imagens está no terceiro nível de pasta?

por Emilly Bezerra Miranda
| 111.1k xp | 3 posts
Estágiaria

Sim. Index.html é o primeiro diretório (pasta Casa Verde), depois disso há a pasta assets (segundo diretório) que já contém a pasta img.

Print da tela do computador

solução!
por Gustavo Osório Bernardo Thompson Flores
| 147.6k xp | 16 posts
Desenvolvedor Front-end

Boa tarde Emilly!

Parece que no print a pasta img tá com a primeira letra maiúscula e no CSS o caminho apontado é com o 'i' de img minúsculo. Acredito que alterando no CSS ou mudando o nome da pasta img para tudo minúsculo resolva o problema.

por MARCELO FREDERICO SLABCOUSKI BRANCO GARCIA
| 131.7k xp | 156 posts
Instrutor de Informática

Concordo com o Gustavo, pode ser a questão do "I" em maiúsculo e no css estar chamando em minúsculo. Mas tbm colocaria desta forma:

.item__icone--cursor{
    background-image: url(../Assets/Img/icones/mouse.svg);
}

.item__icone--carrinho{
    background-image: url(../Assets/Img/icones/cart.svg);
}

.item__icone--caminhao{
    background-image: url(../Assets/Img/icones/truck.svg);
}

Lembre-se de verificar se dentro da pasta Img se a pasta icones está com primeira letra em maiúsculo ou minúsculo

por Emilly Bezerra Miranda
| 111.1k xp | 3 posts
Estágiaria

Perfeito, obrigada!