Como substituir texto por icone

Front-end
#1

Como eu poderia substituir o texto “Editar” do navbar por um ícone, o que preciso utilizar? Segue o código:

	<li class="nav-item dropdown">
		<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			Editar
		</a>
		
		<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
			<a class="dropdown-item" href="#">Desfazer</a>
			<a class="dropdown-item" href="#">Copiar</a>
			<a class="dropdown-item" href="#">Colar</a>
		</div>
	</li>
</ul>
</div>
</nav>

<textarea rows="35" cols="142">
</textarea>

</body>
</html>
#2

Depende da versão do bootstrap que você está usando.

#3

Tenta colocar um span!

Veja se resolve:

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	<span class="glyphicon glyphicon-pencil"></span>
</a>
#4

Se for a versão 4 do bootstrap, não funcionará.

#5

Como seria aplicado nessa versão do bootstrap?

#6

Segundo a documentação, eles removeram o glyphicon e você pode optar por outra que deseje, porém, precisa de configurações adicionais.
A saber: https://getbootstrap.com/docs/4.0/extend/icons/

1 curtida
#7

Eu estava olhando na documentação quando você respondeu, vi que a forma de aplicação fica diferente segundo este link: http://glyph.smarticons.co/

#8

Exato.
Eu desenvolvi um projeto, aí quando fui usar os icons, me deparei com isso.
Acho que os demais “fornecedores” ficaram com ciúmes da exclusividade do glyphicon (que, inclusive, nem é tão rico em opções assim). Sem falar que há muita gente que prefere vetores.

#9

Como eu não havia usado ainda nessa versão do bootstrap não tive problemas, mas é bom saber, em projetos futuros é um ponto a mais para repensar.

#10

Por que não usar somente um <i class="fa fa-pencil"></i> ?

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  <span class="fa fa-pencil"></span>
</a>

Exemplo: https://jsfiddle.net/ertm2v61/4/
Fonte icone usado: https://fontawesome.com/

Errata: correção da tag <i> para -> <span>, tag <i> é para itálico

#11

Não vai funcionar no bootstrap 4.

#12

Funcionou no meu exemplo que postei o link.

Estou importando o Bootstrap 4.3.1

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

2 curtidas