Como substituir texto por icone

19 de fevereiro de 2019 11 respostas

Rosmano 19 de fevereiro de 2019

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>

11 Respostas

darlan_machado 19 de fev. de 2019

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

Jonathan_Medeiros 19 de fev. de 2019

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>

darlan_machado 19 de fev. de 2019

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

Jonathan_Medeiros 19 de fev. de 2019

Como seria aplicado nessa versão do bootstrap?

darlan_machado 19 de fev. de 2019 1 like

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/

Jonathan_Medeiros 19 de fev. de 2019

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/

darlan_machado 19 de fev. de 2019

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.

Jonathan_Medeiros 19 de fev. de 2019

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.

bruno_souza_picinini 20 de fev. de 2019

Por que não usar somente um  ?

<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  para -> , tag  é para itálico

darlan_machado 20 de fev. de 2019

Não vai funcionar no bootstrap 4.

bruno_souza_picinini 20 de fev. de 2019 2 likes

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">

Criado 19 de fevereiro de 2019

Ultima resposta 20 de fev. de 2019

Respostas 11

Participantes 4

11 Respostas

Topicos relacionados