Bootstrap - icone no botão link.
25/12/2015
0
<!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
Posts
26/12/2015
Marcelo Pastore
[url]http://getbootstrap.com/components/[/url]
26/12/2015
Fabricio Alves
26/12/2015
Jothaz
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"
27/12/2015
Fabricio Alves
Mas esses icones vem junto com o Bootstrap ou tenho que baixar por fora?
28/12/2015
Jothaz
<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
28/12/2015
Fabricio Alves
<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.
29/12/2015
Jothaz
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".
29/12/2015
Jothaz
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.
29/12/2015
Fabricio Alves
o link da video aula.
[url]https://www.devmedia.com.br/frameworks-e-mockups-curso-web-sites-com-bootstrap-2/25296[/url]
29/12/2015
Jothaz
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]
29/12/2015
Fabricio Alves
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">
29/12/2015
Jothaz
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.
29/12/2015
Fabricio Alves
29/12/2015
Fabricio Alves
29/12/2015
Jothaz
[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.
Clique aqui para fazer login e interagir na Comunidade :)