Preciso desse estilo visual

DinhoPHP · Outubro 20, 2017

Olá! Preciso urgentemente de ajuda, para desenvolver um estilo de busca avançada, como a do Zap Imóveis (no modo mobile). É possível fazer no CSS puro ou há FrameWorks? Fico no aguardo!

Não consegui enviar a imagem por erro no site deste fórum.

lciceris · Outubro 20, 2017

Ficou bem vago para saber no que precisa de ajuda.... Já tem o código desenvolvido e tá dando algum erro ou o que ?

Levando em conta o estilo da busca o zap, tem como fazer com CSS puro e também usando frameworks.

Passa mais informações pra podermos te ajudar...

DinhoPHP · Outubro 20, 2017

2 horas atrás, lciceris disse:

Ficou bem vago para saber no que precisa de ajuda.... Já tem o código desenvolvido e tá dando algum erro ou o que ?

Levando em conta o estilo da busca o zap, tem como fazer com CSS puro e também usando frameworks.

Passa mais informações pra podermos te ajudar...

Obrigado pelo interesse em ajudar. Então, segue o código do menu do site do meu cliente:

bloco_filtroM.php

<script>
	urlFiltro = "<?php echo $ROOTPATH; ?>/ajax/filtro_pesquisa.php";
	jQuery(function() {
		jQuery('#uf').bind('change', function(ev) {
			jQuery.ajax({
			   type: 'POST',
			   url: urlFiltro,
			   data: { filtro: 'cidades', estado: jQuery('#uf').val() },
			   beforeSend: function() {
					jQuery('#city').html('<option>Carregando...</option>');
					jQuery('#select_imob_bairro').html('<option></option>');
				},
				success: function(r) {
					jQuery('#city').html(r);
				}
			});
			
		});
	});
</script>  
<div class="buscaMobile">
	<form id="search-form">
		<div class="linkNavForm">
            <button data-id="show" style="color: #ffffff; background-color: #f26122; border-color: #f26122;font-size: 1.75em; flex-grow: 1; display: flex; padding: 13px 40px; border-radius: 10px;">Procurar</button>
			<a data-id="show" href="#" style="color: #f26122; margin-right: 55px;">				Exibir busca
			</a>
		</div>
		<div class="rowForm">	
			<label>Finalidade</label>
			<select class="comprar" name="transacao" id="sl-transacao">
				<option value="comprar">Comprar</option>
				<option value="alugar">Alugar</option>
				<option value="alugar-temporada">Alugar temporada</option>
				<option value="lancamentos">Lançamentos</option>
			</select>       
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Tipos de imóvel</label>
					<select class="tipoimovel" name="tipoimovel" id="sl-tipoimovel">
						<option value="">Tipos de imóvel</option>
						<?php
							while($row = mysql_fetch_assoc($tipos)) {
							
								$nome = utf8_decode(tratamento_string($row["nome"]));
						?>
						<option value="<?php echo $nome; ?>"><?php echo utf8_decode($row["nome"]); ?></option>
						<?php
							}
						?>
					</select>
				</div> 
			</section> 
		</div>		
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Quartos</label>
					<select class="quantidade_quartos" id="quantidade_quartos">
						<option value="0">Quartos</option>
						<option value="1-quarto">1 quarto</option>
						<option value="2-quartos">2 quartos</option>
						<option value="3-quartos">3 quartos</option>
						<option value="4-quartos">4 quartos</option>
						<option value="5-quartos">5+ quartos</option>
					</select>
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Vagas</label>
					<select class="quantidade_vagas" id="quantidade_vagas">
						<option value="0">Vagas</option>
						<option value="1-vaga">1 vaga</option>
						<option value="2-vagas">2 vagas</option>
						<option value="3-vagas">3 vagas</option>
						<option value="4-vagas">4 vagas</option>
						<option value="5-vagas">5+ vagas</option>
					</select>
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Estado</label>
					<select name="uf" id="uf" class="uf">
						<option value="">Todos os estados</option>
						<option value="AC">Acre</option>
						<option value="AL">Alagoas</option>
						<option value="AM">Amazonas</option>
						<option value="AP">Amapá</option>
						<option value="BA">Bahia</option>
						<option value="CE">Ceará</option>
						<option value="DF">Distrito Federal</option>
						<option value="ES">Espírito Santo</option>
						<option value="GO">Goiás</option>
						<option value="MA">Maranhão</option>
						<option value="MG">Minas Gerais</option>
						<option value="MS">Mato Grosso do Sul</option>
						<option value="MT">Mato Grosso</option>
						<option value="PA">Pará</option>
						<option value="PB">Paraíba</option>
						<option value="PE">Pernambuco</option>
						<option value="PI">Piauí</option>
						<option value="PR">Paraná</option>
						<option value="RJ">Rio de Janeiro</option>
						<option value="RN">Rio Grande do Norte</option>
						<option value="RO">Rondônia</option>
						<option value="RR">Roraima</option>
						<option value="RS">Rio Grande do Sul</option>
						<option value="SC">Santa Catarina</option>
						<option value="SE">Sergipe</option>
						<option value="SP">São Paulo</option>
						<option value="TO">Tocantins</option>
					</select>	
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Cidade</label>
					<select class="city" id="city">
						<option value="">Todas as cidades</option>
						<?php
							while ($row = mysql_fetch_array($cidades, MYSQL_ASSOC)) {
								
								if ($_REQUEST['city_id'] == $row['id']) {
									echo "<option value='{$row['nome']}' selected>{$row['nome']}</option>";
								} 
								else {
									echo "<option value='{$row['nome']}'>{$row['nome']}</option>";
								}
							}
						?>
					</select>
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<input type="button" name="btnBuscar" id="search-imovel" value="Buscar" class="btnSubmit">
		</div>
	</form>

Desejo deixar igual ao do zapimoveis

DinhoPHP · Outubro 20, 2017

estilo do menu

.buscaMobile {
		top: 0px;
		position: relative;
		display: flex;
		justify-content: center;
	}
	
	.buscaMobile select {
		font-size: 13px;
		margin-top: 5px;
		width: 100%;
	}
	
	.buscaMobile label {
		font-size: 14px;
		font-weight: bold;
	}

.rowForm {
		height: 55px;
		margin-bottom: 5px;
		margin-top: 5px;
		overflow: hidden;
		width: 100%;
	}
	
	.linkNavForm {
		width: 100%;
		margin-top: 10px;
	}
	
	.linkNavForm a {
		color: #666;
		font-size: 13px;
		float: right;
		text-align: right;
    }

Aphrodi · Outubro 25, 2017

Esse menu que você quer?

http://prntscr.com/h1og5e

DinhoPHP · Outubro 25, 2017

10 horas atrás, Aphrodi disse:

Esse menu que você quer?

http://prntscr.com/h1og5e

Sim, mas a parte quando clica na busca avançada, aparece os "botões" com os ícones que ao passar o mouse surge uma barra de rolagem. Estou procurando estilizar aqui, quando chegar nessa parte do hover ou a dificuldade que eu sentir, retornarei. Mas tendo alguma orientação, é só falar!

Aphrodi · Outubro 25, 2017

Me envie o código com css que você conseguiu até agora

DinhoPHP · Outubro 26, 2017

9 horas atrás, Aphrodi disse:

Me envie o código com css que você conseguiu até agora

Tive alguns contra tempos durante o dia, mas segue os códigos. Enviarei o HTML novamente pois tive que fazer alterações. O resultado pode ser visto em acessando o site em modo mobile no Chrome, na resolução recomendada width 499px

HTML

/* Formatação busca avançada*/

	#search-form{
		margin: 0px auto;
		padding: 0px;
		box-sizing: border-box;
		background-color: #fff;
		float: left;
	}

	.filtros_principais{
		list-style: none;
		margin: 0px;
		padding: 5px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.filtros_principais li{
		width: 45%;
		min-width: inherit;
		font-size: 0.9em;
		line-height: normal;
		border: 1px solid #ddd;
		box-sizing: border-box;
		margin: 5px;
		padding: 5px;
		flex-grow: inherit;
	}

	.icon_faixa_preco{
		background: url("http://www.balcaodeservico.com.br/skin/padrao/images/icon_preco.png") 55px 55px;
	}

	.formata_btn{
		width: 40px;
		height: 40px;
		border: 0.5px solid #909093;
		border-radius: 0px;
		text-transform: uppercase;
		/*padding-top: 2px;*/
		background-color: #ffffff;
		font-size: 0.8em;
		margin-left: -5px;
	}

	#filtros_secundarios{
		display: block;
		padding: 15px;
	}

    #dpalavra_chave{
		font-weight: normal;

	}
	#dpalavra_chave input{
		width: calc(100% - 61px);
	}

	#dpalavra_chave button{
		/*width: 12%;*/
		border: 0.5px solid #909093;
		border-radius: 0px;
		text-transform: uppercase;
		/*padding-top: 2px;*/
		background-color: #ffffff;
		font-size: 0.8em;
	}

	#tipo_anuncio{
		width: 100%;
		display: table-footer-group;
	}

	#tipo_anuncio ul{
		list-style: none;
		display: flex;
		width: 100%;
		margin-left: -40px;
	}

css

OBS.: NÃO CONSEGUI INSERIR OS ICONES COM O ::BEFORE UTILIZANDO O CONTENT: URL('........')

Desde já agradeço pelo interesse em me ajudar. Valeu mesmo!

DinhoPHP · Outubro 26, 2017

Atualização: São apenas dois checkbox em Exibir tipo de anúncios. Eu tinha errado e havia inserido três rs.

DinhoPHP · Outubro 26, 2017

Bom o posicionamento dos itens na tela eu consegui fazer de maneira satisfatória, agora, e ainda no CSS, estou com problemas em exibir os ícones com os comandos como: before, after e content. Tentei até o content: url('...........').

O resultado atual pode ser visto clicando aqui. (SEMPRE EM MODO MOBILE)

Arquivo HTML atual:

<form id="search-form" style="width: 95%; display: block;">
		<div class="linkNavForm" style="display: flex; flex-direction: column; flex-wrap: wrap; align-items: center;">
            <button data-id="show" style="color: #ffffff; background-color: #f26122; border-color: #f26122;font-size: 1.75em; flex-grow: 1; display: flex; padding: 13px 40px; border-radius: 10px;">Procurar</button>
			<a data-id="show" href="#" style="color: #f26122;">Busca Avançada</a>
		</div>		
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Quartos</label>
					<select class="quantidade_quartos" id="quantidade_quartos">
						<option value="0">Quartos</option>
						<option value="1-quarto">1 quarto</option>
						<option value="2-quartos">2 quartos</option>
						<option value="3-quartos">3 quartos</option>
						<option value="4-quartos">4 quartos</option>
						<option value="5-quartos">5+ quartos</option>
					</select>
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Vagas</label>
					<select class="quantidade_vagas" id="quantidade_vagas">
						<option value="0">Vagas</option>
						<option value="1-vaga">1 vaga</option>
						<option value="2-vagas">2 vagas</option>
						<option value="3-vagas">3 vagas</option>
						<option value="4-vagas">4 vagas</option>
						<option value="5-vagas">5+ vagas</option>
					</select>
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Estado</label>
					<select name="uf" id="uf" class="uf">
						<option value="">Todos os estados</option>
						<option value="AC">Acre</option>
						<option value="AL">Alagoas</option>
						<option value="AM">Amazonas</option>
						<option value="AP">Amapá</option>
						<option value="BA">Bahia</option>
						<option value="CE">Ceará</option>
						<option value="DF">Distrito Federal</option>
						<option value="ES">Espírito Santo</option>
						<option value="GO">Goiás</option>
						<option value="MA">Maranhão</option>
						<option value="MG">Minas Gerais</option>
						<option value="MS">Mato Grosso do Sul</option>
						<option value="MT">Mato Grosso</option>
						<option value="PA">Pará</option>
						<option value="PB">Paraíba</option>
						<option value="PE">Pernambuco</option>
						<option value="PI">Piauí</option>
						<option value="PR">Paraná</option>
						<option value="RJ">Rio de Janeiro</option>
						<option value="RN">Rio Grande do Norte</option>
						<option value="RO">Rondônia</option>
						<option value="RR">Roraima</option>
						<option value="RS">Rio Grande do Sul</option>
						<option value="SC">Santa Catarina</option>
						<option value="SE">Sergipe</option>
						<option value="SP">São Paulo</option>
						<option value="TO">Tocantins</option>
					</select>	
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Cidade</label>
					<select class="city" id="city">
						<option value="">Todas as cidades</option>
						<?php
							while ($row = mysql_fetch_array($cidades, MYSQL_ASSOC)) {
								
								if ($_REQUEST['city_id'] == $row['id']) {
									echo "<option value='{$row['nome']}' selected>{$row['nome']}</option>";
								} 
								else {
									echo "<option value='{$row['nome']}'>{$row['nome']}</option>";
								}
							}
						*/?>
					</select>
				</div>>
			</section>-->

        <ul class="filtros_principais">

            <li>

                <label id="lb_faixa_preco" class="icon_faixa_preco">FAIXA DE PREÇO?
                    <span>&blacktriangledown;</span>
                </label>
                <div id="dfaixa_preco" data-filtro="slider" style="display: none;">
                    <span>Faixa de preço R$</span>
                    <div id="box_slide_preco">
                        <ul>
                            <li>
                                <input type="text" id="typeprecomin" value="0" maxlength="11"/>
                            </li>

                            <li>
                                <span>até</span>
                                <span></span>
                            </li>

                            <li>
                                <input type="text" id="typeprecomax" maxlength="11">
                            </li>

                        </ul>

                        <div id="slide_busca_preco">
                            <div>
                                <div>

                                    <div>

                                    </div>

                                </div>

                                <div>

                                    <div>

                                    </div>

                                </div>
                            </div>
                        </div>

                        <span>ou</span>
                        <span id="sbuscaporparcela">Buscar por parcela</span>

                    </div>
                </div>

                <div id="dbusca_por_parcela" style="display: none;">

                    <span class="titulo">Buscar por parcela</span>

                    <div>

                        <div>
                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                        <div>

                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                        <div>

                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                        <div>

                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                        <div>

                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                    </div>

                    <input type="hidden" id="hd_modulo_novo" value="false">

                </div>

            </li>

            <li>

                <label id="lbquarto">QUARTOS
                <span>&blacktriangledown;</span>
                </label>

                <div id="dquarto" style="display: none;">

                    <span class="titulos">quartos</span>

                    <ul>

                        <li>

                            <input type="checkbox" id="quarto1" value="1">
                            <label for="quarto1">1</label>

                        </li><li>

                            <input type="checkbox" id="quarto2" value="2">
                            <label for="quarto2">2</label>

                        </li><li>

                            <input type="checkbox" id="quarto3" value="3">
                            <label for="quarto3">3</label>

                        </li>

                        <li>

                            <input type="checkbox" id="quarto4" value="4">
                            <label for="quarto4">4 ou mais</label>

                        </li>

                    </ul>

                </div>

            </li>

            <li>

                <label id="lbsuite">SUÍTES
                <span>&blacktriangledown;</span>
                </label>

                <div id="dsuite" style="display: none;">

                    <span class="titulo">Suítes</span>

                    <ul>

                        <li>
                            <input type="checkbox" id="suite1">
                            <label for="suite1">1</label>
                        </li><li>
                            <input type="checkbox" id="suite2">
                            <label for="suite2">2</label>
                        </li><li>
                            <input type="checkbox" id="suite3">
                            <label for="suite3">3</label>
                        </li>

                        <li>
                            <input type="checkbox" id="suite4">
                            <label for="suite4">4 ou mais</label>
                        </li>

                    </ul>
                </div>
            </li>

            <li>
                <label id="lbvaga">Vagas
                    <span>&blacktriangledown;</span>
                </label>
                
                <div id="dvaga" style="display: none;">
                    
                    <span class="titulo">Vagas</span>
                    
                    <ul>
                        
                        <li>
                            <input type="checkbox" id="vaga1" value="1">
                            <label for="vaga1">1</label>
                        </li><li>
                            <input type="checkbox" id="vaga2" value="2">
                            <label for="vaga2">2</label>
                        </li><li>
                            <input type="checkbox" id="vaga3" value="3">
                            <label for="vaga3">3</label>
                        </li>

                        <li>
                            <input type="checkbox" id="vaga4" value="4">
                            <label for="vaga4">4</label>
                        </li>

                    </ul>

                </div>

            </li>

            <li>

                <label id="lbfaixaarea">Área (m²)
                    <span>&blacktriangledown;</span>
                </label>

                <div id="dfaixaarea" style="display: none;">
                    <span class="titulo">Área (m²)</span>

                    <div id="box_busca">

                        <ul>

                            <li>
                                <input type="text" id="typearea_min_avan" maxlength="6" pattern="\d*">
                            </li>

                            <li class="spacer-slider">
                                <span class="spacer-left"></span>
                                até
                                <span class="spacer-right"></span>
                            </li>

                            <li>
                                <input type="text" id="typearea_max_avan" maxlength="6" pattern="\d*">
                            </li>

                        </ul>

                        <div id="slider_busca_min_area">

                            <div>

                                <div style="left: 0%;">

                                    <div>

                                    </div>

                                </div>

                                <div style="left: 100%;">

                                    <div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </li>

        </ul>

        <div id="filtros_secundarios">

            <label>O que você busca em um imóvel?</label>
            <div id="dpalavra_chave">
                <input id="palavra_chave" type="text" placeholder="Ex: rua, piscina, churrasqueira..." autocomplete="off" maxlength="40"/>
                <button type="button" id="busca_pchave" class="formata_btn">+</button>

                <div id="tipo_anuncio">

                   <label class="tp_anuncio_label">Exibir apenas anúncios:</label>

                    <ul style="list-style: none;">

                        <li style="white-space: nowrap; width: auto;">
                        <input type="checkbox" id="chkbusca_avan_end" name="chkbusca_avan_e01" class="formata_checkbox">
                        <label for="chkbusca_avan_end" class="tp_anuncio_label" style="margin-left: 5px;">Com endereço</label>
                        </li>

                    <li style="white-space: nowrap; width: auto;">

                        <input type="checkbox" id="chkbusca_avan_distrato" name="chkbusca_avan_d01" class="formata_checkbox">
                        <label for="chkbusca_avan_distrato" class="tp_anuncio_label" style="margin-left: 5px;">Oportunidades | Revendas</label>

                    </li>

                   </ul>
                </div>

                <label>Código do imóvel</label>
            <div id="dcodigo_imovel">
                <input id="codigo_imovel" type="text" placeholder="Digite o código (ex: IM00000)" autocomplete="off" maxlength="40"/>
                <button type="button" id="busca_codigo" class="formata_btn">OK</button>

            </div>

        </div>

		</div>			
		<div class="rowForm">	
			<input type="button" name="btnBuscar" id="search-imovel" value="Buscar" class="btnSubmit">
		</div>
	</form>

Arquivo atual CSS:

/* Formatação busca avançada*/

	#search-form{
		margin: 0px auto;
		padding: 0px;
		box-sizing: border-box;
		background-color: #fff;
		float: left;
	}

	.filtros_principais{
		list-style: none;
		margin: 0px;
		padding: 5px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.filtros_principais li{
		width: 45%;
		min-width: inherit;
		font-size: 0.9em;
		line-height: normal;
		border: 1px solid #ddd;
		box-sizing: border-box;
		margin: 5px;
		padding: 5px;
		flex-grow: inherit;
	}

	.icon_faixa_preco{
		background: url("http://www.balcaodeservico.com.br/skin/padrao/images/icon_preco.png") 55px 55px;
	}

	.formata_btn{
		width: 40px;
		height: 40px;
		border: 0.5px solid #909093;
		border-radius: 0px;
		text-transform: uppercase;
		/*padding-top: 2px;*/
		background-color: #ffffff;
		font-size: 0.8em;
		margin-left: -5px;
	}

	#filtros_secundarios{
		display: block;
		padding: 15px;
	}

    #dpalavra_chave{
		font-weight: normal;

	}
	#palavra_chave{
		width: calc(100% - 61px);
	}

	#codigo_imovel{
		width: calc(100% - 61px);
	}

	#dpalavra_chave button{
		/*width: 12%;*/
		border: 0.5px solid #909093;
		border-radius: 0px;
		text-transform: uppercase;
		/*padding-top: 2px;*/
		background-color: #ffffff;
		font-size: 0.8em;
	}

	#tipo_anuncio{
		margin-top: 15px;
	}

	.tp_anuncio_label{
		white-space: nowrap;
	}

	#tipo_anuncio ul{
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0px;
	}

	.formata_checkbox{
		float: left;
		width: 20px;
		height: 20px;
		margin: 0px;
		background-color: #ffffff;
		border: 2px solid #dddddd;
		box-sizing: border-box;
	}

Aphrodi · Outubro 27, 2017

Se for esses icones:

Adicione no topo do seu site entre as tags <head> isso:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

e no css coloque assim:

.a classe do objeto:before{
	font: normal normal normal 14px/1 FontAwesome;
	content: "\e602";
}

Outros icones e códigos para o content você acha aqui:

http://fontawesome.io/icons/

Lembre-se de usar sempre a \ antes do código.

Desculpe a demora, para responder.

Abraços

DinhoPHP · Outubro 27, 2017

Obrigadão Aphrodi e sem problemas pela demora, farei como me orientou e breve voltarei com o resultado. Abraços!

DinhoPHP · Novembro 3, 2017

Em 27/10/2017 at 02:20, Aphrodi disse:
Se for esses icones:

Adicione no topo do seu site entre as tags <head> isso:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
e no css coloque assim:
.a classe do objeto:before{
	font: normal normal normal 14px/1 FontAwesome;
	content: "\e602";
}
Outros icones e códigos para o content você acha aqui:

http://fontawesome.io/icons/

Lembre-se de usar sempre a \ antes do código.

Desculpe a demora, para responder.

Abraços

Então Aphrodi, estou eu de volta após tanto tempo rs. Depois de muitas lutas e contratempos, estou com todo estilo visual do site, pronto, de acordo com que ele quis. Fiz o me indicou sem problemas, mas como eu já havia preparado uma estrutura para trabalhar com <img/>, segui com a mesma, porém, adquiri conhecimento com o que me indicou. No momento porém, estou com dificuldades nos botões, pois o meu cliente o quer azul ao acessar o site ou a cada seleção, isso no desktop, fiz muito bem de diversas maneiras, porém no celular, de modo algum funcionou. Segue o código HTML e JavaScript.

HTML

<div id="procura_cliente">
                    <button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)">Comprar</button>
					<button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)">Alugar</button>
					<button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)">Lançamentos</button>
                    
</div>

Javascript

function changeBgColor(element) {
    if(element.className === 'btn_clicado') {
        element.className = 'btn_desclicado';
    } else {
        element.className = 'btn_clicado';
    }
}

Estou pensando também, como fazer com que apareça uma opção ao selecionarmos a opção preço e outras, aonde nela escolhemos valores e etc por meio de uma barra de rolagem. Desde já agradeço, e um forte abraço!

Arquivado

Preciso desse estilo visual

Recommended Posts

DinhoPHP 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

lciceris 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

DinhoPHP 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

DinhoPHP 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aphrodi 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

DinhoPHP 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aphrodi 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

DinhoPHP 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

DinhoPHP 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

DinhoPHP 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aphrodi 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

DinhoPHP 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

DinhoPHP 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Abrir url na mesma janela

Sistema de Login

Conteúdo Similar

Fóruns

Tempo Real

Informação importante