preciso retirar uma imagem de um testemunho de cliente
porém se eu remover a div e colocar <i class="fa fa-user"></i>
ele não fica legal porém com a imagem tem uma classe que a imagem fica dentro de um circulo
porém o meu cliente ele não quer por imagem de pessoas ele opinou em usar este ícone informado ai
o que eu não conseguindo é fazer este ícone ficar dentro deste círculo corretamento teria alguma ideia de como fazer funcionar beleza?
O meu HTMl esta desta desta forma com a imagem que fica normal
<divclass="item"><divclass="testimony-container"><divclass="testimony-image img-responsive"style="background:url(./midias/depoimento/priscila.jpg)"></div><divclass="testimony-content"><h3>Paulo</h3><blockquote><p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.<br></p></p></blockquote></div></div></div>
Estou criando um site e já consegui fazer as fontes mudarem de tamanho, conforme o tamanho da tela. Se a tela do usuário for um celular, as fontes aumentam e ficam legíveis.
Agora preciso que determinados ícones em png, também aumentem da mesma forma, ficando legíveis em telas menores.
O código de uma das imagens é este:
<img style="width: 45px; height: 12px;" alt="" src="logomar.png"><br>
Queria saber o que devo incluir para que quando a tela for menor que 480 pixel, a imagem dobre de tamanho.
Seguinte, eu criei o menu bootstrap segue o código abaixo. Quando eu estou vendo o site pelo celular, o menu vira um HAMBURGUER. Só que eu quero quando clicar no HAMBURGUER ele vira um X.
E quando eu clicar no link ele voltar para o HAMBURGUER.
<nav class="navbar navbar-default navbar-fixed-top">
<!--INICIO DIV CONTAINER ONDE VAI TODAS AS INFORMAÇÕES-->
<div class="container-fluid containertop" id="topoinicio">
<div class="navbar-header">
<!--INICIO CONFIGURAÇÃO MENU HAMBERGUER-->
<button type="button" class="navbar-toggle menuHamburguer" data-toggle="collapse" data-target="#menu-navegacao">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<!--FIM CONFIGURAÇÃO MENU HAMBERGUER-->
<!--INICIO LOGO MARCA-->
<!--<a class="navbar-brand" href="#page-top">
<span class="iden">Iden</span> <span class="techonology">Technology</span>
</a>-->
<ol class="nav">
<ol class="menu" style="border:none;">
<a href="#home">
<img src="img/ico_3.png" class="img-responsive img-rounded imgLogo">
</a>
</ol>
</ol>
<!--FIM LOGO MARCA-->
</div>
<!--INICIO MENU LINK-->
<div class="collapse navbar-collapse menu-navegacao" id="menu-navegacao">
<ul class="nav navbar-nav navbar-right">
<li class="menu">
<a href="#home">HOME</a>
</li>
<li class="menu">
<a href="#solucoes">SOLUÇÕES</a>
</li>
<li class="menu">
<a href="#servicos">SERVIÇOS</a>
</li>
<li class="menu">
<a href="#empresa">EMPRESA</a>
</li class="menu">
<li class="menu">
<a href="#localizacao">LOCALIZAÇÃO</a>
</li>
<li class="menu">
<a href="#contato">CONTATO</a>
</li>
<li class="abrirlink">
<a href="https://identechnology.tomticket.com?account=444224P07112016122136" title="Acessar Help Desk" target="_blank">TICKET<a>
</li>
</ul>
</div>
<!--FIM MENU LINK-->
</div>
<!--FIM DIV CONTAINER ONDE VAI TODAS AS INFORMAÇÕES-->
</nav>
Eu tenho esse código abaixo CSS, que funciona um pouco. Só que o ele ja abre com o X.
<style type="text/css">
.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
</style>
Veja a imagem abaixo de quando eu entro no site. Ele entra com o X. E quando eu clico pela primeira vez no X, ele continua o x. E quando pela segunda vez clico no X ou clico em menu da lista ele volta para o HAMBURGUER.
Para ajudar, segue o link do site.
Iden Technology
Boa tarde @Omar~
poderia me dar uma ajuda se for possível
preciso retirar uma imagem de um testemunho de cliente
porém se eu remover a div e colocar <i class="fa fa-user"></i>
ele não fica legal porém com a imagem tem uma classe que a imagem fica dentro de um circulo
porém o meu cliente ele não quer por imagem de pessoas ele opinou em usar este ícone informado ai
o que eu não conseguindo é fazer este ícone ficar dentro deste círculo corretamento teria alguma ideia de como fazer funcionar beleza?
O meu HTMl esta desta desta forma com a imagem que fica normal
Aí tentei usar desta forma
<div class="testimony-image img-responsive" ><i class="fa fa-user" style="font-size: 85px;"></i>
porém ele não fica certo dentro do circulo
Se puder da uma ajuda fico grato mano...
Compartilhar este post
Link para o post
Compartilhar em outros sites