Fórum <Font Awesome> #586954
19/10/2017
0
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 <-
-> CSS <-
Desde já obrigado guys.
[url:descricao=imagem da fonte que não aparece]https://imgur.com/a/kpB6z[/url]
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
Curtir tópico
+ 0
Responder
Post mais votado
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
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
Venancio Alves
Responder
Gostei + 1
Mais Posts
19/10/2017
Fernando
demais cara! valeu mesmo
Responder
Gostei + 1
Clique aqui para fazer login e interagir na Comunidade :)