Bootstrap - icone no botão link.

25/12/2015

0

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

Fabricio Alves

Responder

Posts

26/12/2015

Marcelo Pastore

Não terá que baixar esses icones Fabricio? Confere nesse link.

[url]http://getbootstrap.com/components/[/url]
Responder

26/12/2015

Fabricio Alves

Testei alguns exemplos e ainda não aparece, baixei o bootstrap completo.
Responder

26/12/2015

Jothaz

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"
Responder

27/12/2015

Fabricio Alves

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?
Responder

28/12/2015

Jothaz

Para colocar uma imagem em um link pode fazer assim:

<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
Responder

28/12/2015

Fabricio Alves

Boa tarde.

<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.
Responder

29/12/2015

Jothaz

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".
Responder

29/12/2015

Jothaz

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.
Responder

29/12/2015

Fabricio Alves

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]
Responder

29/12/2015

Jothaz

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:

[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]
Responder

29/12/2015

Fabricio Alves

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:


<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">	

Responder

29/12/2015

Jothaz

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.
Responder

29/12/2015

Fabricio Alves

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.
Responder

29/12/2015

Fabricio Alves

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.
Responder

29/12/2015

Jothaz

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.
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar