I can’t use bootstrap glyphicons

Question

I am not able to use the bootstrap glyphicons, just do not appear, I am using a linux machine, and I know it is something related to fonts folder because it did not come in the common bootstrap installation, follows code:

<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 my folders will be well disorganized, and that probably the font file was put in the wrong place, I put it everywhere else nothing, I downloaded the fonts file from this link: https://gitlab.com/mailman/mailman-website/tree/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts

Since I’m using SASS for the first time, I made some changes to the _variables.scss class and created a _glyphicons.scss and after these changes, I already got a return, but it’s not the same as if I was using CDN because it aligns right, but I would like to use the css files I downloaded and so I don’t want to use via CDN

It can be seen that the icons are a little misaligned with the input, what using CDN it aligns properly nor I need to insert any more lines of code.

Answer 1

Face only the Glyficon font by itself does nothing, you have to import in the Head her CSS too!

Use the official CDN

Now if you want to use locally you have to import the @font-face in your CSS this way for example:

@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 Example with 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>

That answer can also help you. https://stackoverflow.com/questions/19608873/how-to-include-glyphicons-in-bootstrap-3