Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa dia;
Eu criei uma lista de serviços no site do cliente;
O Código segue abaixo. O site é responsivo, uso o bootstrap. Veja que dentro de cada serviço, o sub serviço tem
<span class="glyphicon glyphicon-ok"></span>
.
<div class="panel-group col-md-12" id="paineis-sobre">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#primeiro-paragrafo" data-parent="#paineis-sobre">
<h1>Missão</h1>
</div>
<div class="collapse in" id="primeiro-paragrafo">
<div class="panel-body text-left">
<p class="text-justify"><span class="glyphicon glyphicon-ok"></span> Levar soluções em TI de alto nível e qualidade com
profissionalismo e comprometimento.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#segundo-paragrafo" data-parent="#paineis-sobre">
<h1>Visão</h1>
</div>
<div id="segundo-paragrafo" class="collapse">
<div class="panel-body text-left">
<p class="text-justify"><span class="glyphicon glyphicon-ok"></span> Ser referência no segmento de TI, sendo reconhecida pelos
clientes, colaboradores e fornecedores, pelos serviços de
qualidade prestados.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#terceiro-paragrafo" data-parent="#paineis-sobre">
<h1>Valores</h1>
</div>
<div id="terceiro-paragrafo" class="collapse">
<div class="panel-body text-left">
<p class="text-justify"><span class="glyphicon glyphicon-ok"></span> Busca permanente por oportunidade de melhorias, novas
técnicas, metodologias e avanços nas soluções executadas;</p>
<p class="text-justify"><span class="glyphicon glyphicon-ok"></span> Comprometimento com o meio ambiente;</p>
<p class="text-justify"><span class="glyphicon glyphicon-ok"></span> Responsabilidade;</p>
<p class="text-justify"><span class="glyphicon glyphicon-ok"></span> Alta Performance;</p>
<p class="text-justify"><span class="glyphicon glyphicon-ok"></span> Revolução Humana;</p>
</div>
</div>
</div>
</div>
E eu quero colocar um
<span class="glyphicon glyphicon-chevron-down"></span>
na div
<div class="panel-heading"
. Só que quando eu coloco, o icone do span
glyphicon glyphicon-chevron-down fica ao lado do texto do H1.
Eu quero que ele fique do lado esquerdo, ou seja.. no inicio. Da forma que esta a imagem. E também que fique mais ou menos do mesmo tamanho.
Att;
Gilberto Jr>
5 horas atrás, Maujor disse:
Use a seguinte marcação HTML:
<h1>
<span class="glyphicon glyphicon-chevron-down" style="vertical-align:bottom"></span>
Missão
</h1>
Veja o resultado [neste JSFiddle](https://jsfiddle.net/maujor/ybcp27L3/)
Nota: O link que você postou para a imagem está quebrado.
@Maujor, boa tarde.
Obrigado pelo retorno. funcionou perfeito. Mas um detalhe, o texto e o simbolo **GLYPHICON-CHEVRON-DOWN** fica centralizado. Eu gostaria de deixar somente o texto centralizado e o **GLYPHICON-CHEVRON-DOWN** do lado esquerdo.
E outra coisa, quando clicar na pra abrir, a setinha fica sentido apontando para baixo, quando clicasse e fosse pra fechar é possivel colocar **GLYPHICON-CHEVRON-UP?**
Obrigado!!!
Att;
Gilberto JrAcertei a marcação HTML e deu certo
<h1 class="text-center">Visão<span class="glyphicon glyphicon-chevron-down" style="vertical-align:bottom;float:right;"></span></h1>
</div>
Obrigado pela força.
Att;
Gilberto Jr
Use a seguinte marcação HTML: