É possível alterar o ícone da li? Como fazer para alterar o símbolo da lista não ordenada?
É possível alterar o ícone da li? Como fazer para alterar o símbolo da lista não ordenada?
hoje, com a Alura e o Google Gemini
Fala Romario,
Você pode alterar usando as propriedades list-style-image ou list-style-type, abaixo um link explicando cada propriedade, assim você poderá ver e testar ;)
Espero ter ajudado!
Abraços!
Olá Romario,
Quando voce diz alterar o ícone, seriam os marcadores?
Se sim, é possível através selecionando sua lista no CSS e modificando o list-style-type dela.
Alguns exemplos :
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
Existe também a possibilidade de usar imagens, nesse caso usa-se o list-style-image .
Espero ter ajudado!
Abs.
Da sim modificando o list-style-type dela. De uma pesquisada sobre o assunto, e escolha o melhor tipo para modificação. A mudança deverá ser realizada no CSS.
Bom dia romário (e todos que tem esta dúvida), se ainda esta por aqui, outra solução é utilizando pseudo-elementos:
Aqui tem um exemplo de como funciona, mas se for usar imagem para o ícone, recomendo o list-style-image mesmo..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li class="item">Item1</li>
<li class="item">Item2</li>
<li class="item">Item3</li>
</ul>
<style>
ul{
list-style: none;
}
.item{
position: relative;
margin: 10px 0px;
}
.item::before{
content: '';
position: relative;
left: 0;
top: 0;
padding: 5px 15px;
background-image: url(https://icon-icons.com/icons2/522/PNG/512/success_icon-icons.com_52365.png);
background-repeat: no-repeat;
background-size: cover;
margin-right: 3px;
}
</style>
</body>
</html>Em meus projetos quando necessário, eu utilizo frameworks de fontes de ícones, eles possuem um unicode para cada ícone, assim você não precisa carregar uma imagem, o pseudo ::before fica assim por exemplo:
.item::before{
content: '\f00c';
position: relative;
left: 0;
top: 0;
font-size: 100%;
color: #222
margin-right: 3px;
}O atributo "content" recebe o unicode('\f00c') do ícone que estou querendo utilizar como marcador, depois é só formatar como fonte mesmo, repare os atributos "font-size" e color".
Neste último exemplo utilizei o http://fontawesome.io/icons/, mas só use ele em seus projetos futuros se eles realmente precisarem de muitos ícones...