I can not use bootstrap glyphicons

Navigation
1

I am not able to use the bootstrap glyphicons, they simply do not appear, I am using a linux machine, and I know it is something about the fonts folder because it did not come in the common bootstrap installation, 

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

I know that my folders will be very messy, and that probably the font file was put in the wrong place, I put it everywhere else, I downloaded the fonts file from this link: link

AsI'musingSASSforthefirsttime,Imadesomechangestothe_variables.scssclassandcreateda_glyphicons.scssandafterthosechanges,Ialreadygotareturn,butit'snotthesameasifIwereusingtheCDNbecauseitalignscorrectly,butIwouldliketousethecssfilesIdownloadedandsoIdonotwanttouseviaCDN

You can see that the icons are somewhat misaligned with the input, which using the CDN it aligns correctly nor do I need to insert any more lines of code.

    
asked by anonymous 14.03.2018 / 00:42

1 answer

1

Just the font Glyficon alone does nothing, you have to import into the Head the CSS of it too!

Use the official CDN

Now if you want to use locally you have to import @font-face into your CSS like this: 

@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);
}

See the example with the CDN, fonts usually appear with your code. 

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

This answer can also help you. link

    
14.03.2018 / 01:26
Polymorphism with interface and abstract class Javascript - Quiz