<Font Awesome>

Front-end

19/10/2017

Galera, eu estou começando a estudar front-end, e sou bastante rookie no negócio. :/
Deixem-me explicar. Estou fazendo uma aula-online, mas não senti muita firmeza nos professores, que já fizeram essa aula a mais de anos atrás e está tudo mudado e eu não quero utilizar das mesmas tecnologias ultrapassadas que eles usam no vídeo. por ex: bootstrap 3.6, ou o font awesome que fazia parte do gethub ainda ;/
Guys, me ajudem nessa!

Gostaria que o meu ícone de search ficasse na frente do retangulo de busca, ao invez do GO que já vem no bootstrap, inserir o ícone de search.
Segue em anexo as partes do CSS e do INDEX referente ao código.

-> INDEX <-

<div class="row">
				<nav id="menu">
					<ul>
						<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
						<li><a href="#">Tickets</a></li>
						<li><a href="#">News</a></li>
						<li><a href="#">Schedule</a></li>
						<li class="search">
							<div class="input-group">
							      <input type="search" class="form-control" placeholder="Search..." aria-label="Search for...">
							      <span class="input-group-btn">
							        <button class="btn btn-secondary" type="button"><i class="fa fa-search	"></i></button>
							      </span>
							 </div> <!-- input-group -->
						</li>
					</ul>
				</nav>

			</div>



-> CSS <- 
}
#menu {
	position: absolute;
	right:0;
	margin: 36px;

}
#menu li {
	display: inline-block;
	font-family: "Open-Sans";
}

#menu li.search {
	width: 182px;
}

#menu li.search input {
	background-color: #5c2d90;
	color: #FFF
	border: none;
	height: 30px;
	line-height: 30px;
}

#menu li.search ::-webkit-input-placeholder {
	color: #FFF;
}
#menu li.search button {
	background: none;
	border: none;

}
#menu li.search button i {
	color: #fff;
}

#menu li a {
	color: #FFF;
	font-size: 16px;
	padding: 10px 25px;
}


Desde já obrigado guys.
[url:descricao=imagem da fonte que não aparece]https://imgur.com/a/kpB6z[/url]
Fernando

Fernando

Curtidas 0

Melhor post

Venancio Alves

Venancio Alves

19/10/2017

Olá Fernando, indico o link daqui mesmo da Devmedia:

https://www.devmedia.com.br/desenvolvendo-layouts-para-caixas-de-pesquisa-em-paginas-web/37225


Também aconselho à fazer os cursos da Devmedia, são excelentes e você terá mais sucesso:

https://www.devmedia.com.br/guia/carreira-programador-front-end/38792
GOSTEI 1

Mais Respostas

Fernando

Fernando

19/10/2017

demais cara! valeu mesmo
GOSTEI 1
POSTAR