Bootstrap - icone no botão link.
Como colocar um icone no botão(link)? Para entender, veja o código.
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Exemplo 01</title> <link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="bootstrap-3.3.6-dist/js/bootstrap.min.js" rel="stylesheet" media="screen"> </head> <body> <a href="#" class="btn btn-primary"><i class="icon-user icon-white"></i>Olá Mundo</a> </body> </html>
Fabricio Alves
Curtidas 0
Respostas
Marcelo Pastore
25/12/2015
Não terá que baixar esses icones Fabricio? Confere nesse link.
[url]http://getbootstrap.com/components/[/url]
[url]http://getbootstrap.com/components/[/url]
GOSTEI 0
Fabricio Alves
25/12/2015
Testei alguns exemplos e ainda não aparece, baixei o bootstrap completo.
GOSTEI 0
Jothaz
25/12/2015
Para variar não entendi bem qual o objetivo do post, pois quanto mais claro e descritivo mas fácil ajudar. E sempre que possível poste uma imagem, pois ajuda muito.
Vou chutar que, se estiver errado por favor desconsidere a resposta, o que você deseja é usar glyphicons. Que seria algo assim:
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151226-225825.png[/img]
Se for isto veja como funciona neste link.
Existem milhares de modelos e a forma de usar é sempre a mesma, para mais detalhes pergunte ao pai Google sobre "glyphicons button sample"
Vou chutar que, se estiver errado por favor desconsidere a resposta, o que você deseja é usar glyphicons. Que seria algo assim:
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151226-225825.png[/img]
Se for isto veja como funciona neste link.
Existem milhares de modelos e a forma de usar é sempre a mesma, para mais detalhes pergunte ao pai Google sobre "glyphicons button sample"
GOSTEI 0
Fabricio Alves
25/12/2015
Eu queria apenas colocar um icone no lado do botão(link), mas acho que algo está errado, o nome possivelmente, não sei.
Mas esses icones vem junto com o Bootstrap ou tenho que baixar por fora?
Mas esses icones vem junto com o Bootstrap ou tenho que baixar por fora?
GOSTEI 0
Jothaz
25/12/2015
Para colocar uma imagem em um link pode fazer assim:
Claro que a imagem deve existir em uma pasta da aplicação.
Veja exemplo funcionando neste link
Sobre o exemplo que postei do glyphicons no link que postei tem como usá-lo só e necessário referenciar os arquivos corretamente.
Segue novamente o link do exemplo do glyphicon
<a href="http://www.w3schools.com"> <img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100"> Clique aqui</a>
Claro que a imagem deve existir em uma pasta da aplicação.
Veja exemplo funcionando neste link
Sobre o exemplo que postei do glyphicons no link que postei tem como usá-lo só e necessário referenciar os arquivos corretamente.
Segue novamente o link do exemplo do glyphicon
GOSTEI 0
Fabricio Alves
25/12/2015
Boa tarde.
Nesse meu código, era para apresentar dentro do botão uma imagem(botão de usuario "login"), na video aula apresenta.
Acho que não existe mais no bootstrap.
<a href="#" class="btn btn-primary"><i class="icon-user icon-white"></i>Olá Mundo</a>
Nesse meu código, era para apresentar dentro do botão uma imagem(botão de usuario "login"), na video aula apresenta.
Acho que não existe mais no bootstrap.
GOSTEI 0
Jothaz
25/12/2015
Agora entendi o que você quer, demorou, mas sou lerdo mesmo! kkkkkkkk
O problema é que o ícone não aparece mas aparece o botão?
Posta o link da vídeo aula, pois sinceramente nunca usei esta tag "<i".
O problema é que o ícone não aparece mas aparece o botão?
Posta o link da vídeo aula, pois sinceramente nunca usei esta tag "<i".
GOSTEI 0
Jothaz
25/12/2015
Fiquei curioso e pesquisei sobre o assunto.
Achei esta página Twitter Bootstrap icons com alguns exemplos que funcionam:
[url:descricao=Acesse este link para ver a página funcionando como a imagem abaixo.]http://www.w3resource.com/twitter-bootstrap/example-icon-search-form.html[/url]
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-121103.png[/img]
Porém se copio o conteúdo da página e rodo local não funciona como pode ser visto na imagem abaixo:
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-121347.png[/img]
Achei muito estranho não funcionar e sinceramente não sei explicar o porque.
Quando tiver tempo vou pesquisar mais sobre o assunto e posto se conseguir alguma informação.
Ou esperemos que alguém possa esclarecer o que acontece.
Achei esta página Twitter Bootstrap icons com alguns exemplos que funcionam:
[url:descricao=Acesse este link para ver a página funcionando como a imagem abaixo.]http://www.w3resource.com/twitter-bootstrap/example-icon-search-form.html[/url]
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-121103.png[/img]
Porém se copio o conteúdo da página e rodo local não funciona como pode ser visto na imagem abaixo:
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-121347.png[/img]
Achei muito estranho não funcionar e sinceramente não sei explicar o porque.
Quando tiver tempo vou pesquisar mais sobre o assunto e posto se conseguir alguma informação.
Ou esperemos que alguém possa esclarecer o que acontece.
GOSTEI 0
Fabricio Alves
25/12/2015
Eu acho que fui eu que acabei não explicando bem no começo, enfim, chegamos ao ponto! rsrsrs
o link da video aula.
[url]https://www.devmedia.com.br/frameworks-e-mockups-curso-web-sites-com-bootstrap-2/25296[/url]
o link da video aula.
[url]https://www.devmedia.com.br/frameworks-e-mockups-curso-web-sites-com-bootstrap-2/25296[/url]
GOSTEI 0
Jothaz
25/12/2015
O link não ajudou, pois não sou assinante.
Como já tinha dito nunca usei a tag "<i />", mas agora entendi como funciona.
A classe "icon-" usa uma imagem como background onde estão todos os ícones:
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-134436.png[/img]
E depois pega o ícone de acordo com a posição na imagem acima:
E a classe "icon-white" usa outra imagem:
Então para funcionar é preciso que dentro da pasta onde esta a pasta css que contem o bootstrap.css tenha uma pasta img com a imagens usadas.
Eu criei a seguinte estrutura:
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-134911.png[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-134958.png[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-135102.png[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-135149.png[/img]
E fiz referência ao bootstrap.css assim:
[url:descricao=Aqui tem uma cópia do projeto com estrutura de pastas e imagens para download]https://onedrive.live.com/redir?resid=6B6FE80FB785B22C!91356&authkey=!ABF313kZrSNiGvg&ithint=file%2czip[/url]
Sinceramente acho muito mais simples e proveitoso utilizar glyphicons como tinha sugerido no inicio do post, pois não precisa de todo este trabalho basta referenciar e usar como nos links de exemplo que postei.
Espero que lhe ajude.
Veja as imagens das páginas funcionando.
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-133741.png[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-133808.png[/img]
Como já tinha dito nunca usei a tag "<i />", mas agora entendi como funciona.
A classe "icon-" usa uma imagem como background onde estão todos os ícones:
[class^="icon-"], [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings.png");
}
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-134436.png[/img]
E depois pega o ícone de acordo com a posição na imagem acima:
.icon-search {
background-position: -48px 0;
}
.icon-user {
background-position: -168px 0;
}
E a classe "icon-white" usa outra imagem:
.icon-white {
background-image: url("../img/glyphicons-halflings-white.png");
}
Então para funcionar é preciso que dentro da pasta onde esta a pasta css que contem o bootstrap.css tenha uma pasta img com a imagens usadas.
Eu criei a seguinte estrutura:
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-134911.png[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-134958.png[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-135102.png[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-135149.png[/img]
E fiz referência ao bootstrap.css assim:
<link href="assets/css/bootstrap.css" rel="stylesheet">
[url:descricao=Aqui tem uma cópia do projeto com estrutura de pastas e imagens para download]https://onedrive.live.com/redir?resid=6B6FE80FB785B22C!91356&authkey=!ABF313kZrSNiGvg&ithint=file%2czip[/url]
Sinceramente acho muito mais simples e proveitoso utilizar glyphicons como tinha sugerido no inicio do post, pois não precisa de todo este trabalho basta referenciar e usar como nos links de exemplo que postei.
Espero que lhe ajude.
Veja as imagens das páginas funcionando.
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-133741.png[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-133808.png[/img]
GOSTEI 0
Fabricio Alves
25/12/2015
Ainda não está dando certo, acredito que esse icone que eu esteja colocando não exista mais na pasta do bootstrap.
tentei inserindo alguns arquivos:
tentei inserindo alguns arquivos:
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet" media="screen"> <link href="bootstrap-3.3.6-dist/css/bootstrap-theme.css" rel="stylesheet" media="screen"> <link href="bootstrap-3.3.6-dist/js/bootstrap.min.js" rel="stylesheet" media="screen">
GOSTEI 0
Jothaz
25/12/2015
Por acaso você viu o link para download com o projeto funcionando que postei?
Você chegou a tentar entender as imagens da estrutura de pastas que usei?
Se não criar a estrutura como postei esquece que não vai funcionar. Sem uma pasta de nome "img" e com as imagens pode desistir.
Outro detalhe é confirmar que o caminho que você esta usando "bootstrap-3.3.6-dist/css/" para referenciar esteja correto.
Funciona, mas é preciso entender a estrutura, não da para somente copiar/referenciar o bootsrap.
No post acima descrevi o caminho das pedras e lá tem toda a informação que é preciso, agora pode ser que não ficou claro ou que falta didática, então vamos esperar que alguém possa ser mais claro.
Eu sinceramente não tenho mais como ajudar, só posso desejar boa sorte e bons estudos.
Você chegou a tentar entender as imagens da estrutura de pastas que usei?
Se não criar a estrutura como postei esquece que não vai funcionar. Sem uma pasta de nome "img" e com as imagens pode desistir.
Outro detalhe é confirmar que o caminho que você esta usando "bootstrap-3.3.6-dist/css/" para referenciar esteja correto.
Funciona, mas é preciso entender a estrutura, não da para somente copiar/referenciar o bootsrap.
No post acima descrevi o caminho das pedras e lá tem toda a informação que é preciso, agora pode ser que não ficou claro ou que falta didática, então vamos esperar que alguém possa ser mais claro.
Eu sinceramente não tenho mais como ajudar, só posso desejar boa sorte e bons estudos.
GOSTEI 0
Fabricio Alves
25/12/2015
Testei isoladamente e funcionou, porem ainda não estou entendendo, o .css pega as imagens da pasta img? Não estou conseguindo assimilar, pois estou usando a pasta full do bootstrap e nada, sobre o caminho, está correto.
GOSTEI 0
Fabricio Alves
25/12/2015
Saquei, suspeitava e acho que seja isso, no seu arquivo .css tem o ".icon-user" e no bootstrap.css do que baixei não tem.
GOSTEI 0
Jothaz
25/12/2015
Para funcionar é preciso ter a pasta IMG com as imagens e o bootstrap.css ter as seguintes classe:
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-170212.png[/img]
Se o seu não tem não sei dizer o porque.
Pode ser que a minha versão é mais antiga ou a sua.
De qualquer forma aconselho a ignorar esta técnica e usar glyphicons que é muito mais simples e retorna o mesmo efeito.
[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20151229-170212.png[/img]
Se o seu não tem não sei dizer o porque.
Pode ser que a minha versão é mais antiga ou a sua.
De qualquer forma aconselho a ignorar esta técnica e usar glyphicons que é muito mais simples e retorna o mesmo efeito.
GOSTEI 0
Fabricio Alves
25/12/2015
Se for melhor assim, OK! Muito obrigado hein, essa foi sufoco. kkkk
GOSTEI 0