Error using glyphicon with bootstrap-Sass

Asked

Viewed 239 times

2

Good afternoon, I’m trying to work with bootstrap-sass and sass, However, by including an icon in my class, nothing happens. Below follows the line of code that represents the same, I wonder if I should configure something else to use Bs fonts or if I’m doing something wrong.

Note: I do not know if it comes to the case but for the backend I am using Django 1.9.

@import "../vendor/bootstrap/assets/stylesheets/_bootstrap-sprockets.scss";
@import "../vendor/bootstrap/assets/stylesheets/_bootstrap.scss";


.tablestyle{
    @extend .col-md-6, .col-md-offset-2;
    .table{
        @extend .table, .table-striped;
        .info{
            @extend .btn, .btn-info, .btn-xs;
        }
        .edit{
            @extend .glyphicon, .glyphicon-edit;
        }
    }   
}
twitter-bootstrap bootstrap-3 sass bootstrap-glyphicons

  • If you only use the Glyph class, does it work? Directly to Glyph class in html.

  • 1

    Bootstrap already imports glyphicons, so you don’t need to import again, just use directly <span class="glyphicon glyphicon-edit></span>". Another thing is that in Bootstrap you reference the glyphicon by glyphicon glyphicon-user, example. You don’t need the .scss in their @import. Check this out: http://stackoverflow.com/questions/18369036/bootstrap-3-glyphicons-are-notworking

  • @Celsomtrindade already tried this and it doesn’t work either.

  • @Eduardoalmeida used what was in Question that you indicated me, I overwritten the font-face path and it worked. thanks!

  • I’m glad I could help!

  • Put your solution and mark as answer, please.

Show 1 more comment

1 answer

0


I managed to solve my problem using as a base a comment just above, I just overwritten the path of the face font, so it was like this:

@import "../vendor/bootstrap/assets/stylesheets/_bootstrap-sprockets.scss";
@import "../vendor/bootstrap/assets/stylesheets/_bootstrap.scss";

// font face
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../vendor/bootstrap/assets/fonts/bootstrap/glyphicons-halflings-regular.eot');
  src: url('../vendor/bootstrap/assets/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('../vendor/bootstrap/assets/fonts/bootstrap/glyphicons-halflings-regular.woff') format('woff'), url('../vendor/bootstrap/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf') format('truetype'), url('../vendor/bootstrap/assets/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Browser other questions tagged twitter-bootstrap bootstrap-3 sass bootstrap-glyphicons

You are not signed in. Login or sign up in order to post.