1

Não estou conseguindo usar os glyphicons do bootstrap, simplesmente nao aparecem, estou usando uma maquina linux, e sei que é algo referente a pasta fonts pois a mesma não veio na instalação comum do bootstrap, segue código:

<form>

            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input id="username" type="text" class="form-control" name="username" placeholder="Usuario">
            </div>
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                <input id="password" type="password" class="form-control" name="password" placeholder="Senha">
            </div>

        </form>

Sei que as minhas pastas vão estar bem desorganizadas, e que provavelmente o arquivo font foi colocado no lugar errado, eu coloquei ele em todos os lugares mais nada, baixei o arquivo fonts deste link: https://gitlab.com/mailman/mailman-website/tree/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts

inserir a descrição da imagem aqui

Como estou utilizando o SASS pela primeira vez, fiz algumas alterações na classe _variables.scss e criei uma _glyphicons.scss e após essas alterações, já obtive um retorno, mas não é o mesmo do que se eu estivesse utilizando o CDN pois ele alinha certinho, mas eu gostaria de usar o arquivos css que baixei e por isso não quero usar via CDN inserir a descrição da imagem aqui

Pode se ver que os icones estão um pouco desalinhados com o input, o que usando o CDN ele alinha corretamente nem eu precisar inserir nenhuma linha de codigo a mais.

2
  • 1
    Eduardo parece que a dica para importar a Font já deu um resultado né. E parece que ele já está importando alguns estilos do Bootstrap. Vc está usando a Versão 3.3 correto? Pelo seu código parece que o Erro agora é com a forma com vc construiu o Form ou alguma classe que vc customizou errado ou não usou no lugar correto e não mais com o Glyficon. Evite editar a pergunta para fazer outra pergunta. Finalize ou Aceite essa pergunta e abra uma Nova Pergunta com o outro problema. Tmj
    – hugocsl
    Commented 14/03/2018 às 10:12
  • Obrigado Hugo ! Irei verificar o meu código html do form e se eu fiz alguma modificação de impacto nas classes css e também vou seguir seu conselho sobre evitar edição para realizar novas perguntas, vlw. Commented 14/03/2018 às 12:29

1 Resposta 1

2

Cara só a font Glyficon por si só não faz nada, vc tem que importar no Head o CSS dela também!

Use o CDN oficial

Agora se vc quiser usar localmente vc tem que importar o @font-face no seu CSS dessa forma por exemplo:

@font-face{
    font-family:'Glyphicons Halflings';
    src:url(../fonts/glyphicons-halflings-regular.eot);
    src:url(../fonts/glyphicons-halflings-regular.woff2);
    src:url(../fonts/glyphicons-halflings-regular.woff);
}

Veja o Exemplo com o CDN, as fontes aparecem normalmente com o seu código.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form>
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input id="username" type="text" class="form-control" name="username" placeholder="Usuario">
            </div>
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                <input id="password" type="password" class="form-control" name="password" placeholder="Senha">
            </div>

</form>

Essa resposta também pode te ajudar. https://stackoverflow.com/questions/19608873/how-to-include-glyphicons-in-bootstrap-3

1
  • se eu usar pelo CDN perco as configurações que já fiz nos arquivos, não sei se é muito importante mas estou usando o SASS pela primeira vez e por isso estou mais perdido ainda, pesquisei no github algo sobre isso e encontrei nesse link github.com/twbs/bootstrap-sass alguns dados, copiei então a variavel _gluphicons.scss para a pasta scss, adicionei os imports igual está no link acima na _variables.scss e também o seu exemplo no style.css, o SASS compilou sem erros e o resultado está na edição da pergunta Commented 14/03/2018 às 3:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .