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

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Fóruns

Tempo Real

Informação importante