It's a problem with the escape sequences. If you can reliably maintain a UTF-8 encoded CSS file, you could override the Bootstrap defaults to use the actual, non-escaped glyphs.
(Depending on your browser, the following code will appear to contain a bunch of boxes. Copying the code and pasting it into a UTF-8 document should preserve the values, though.)
@charset "UTF-8";
.glyphicon-bell:before {
content: "🔔";
}
.glyphicon-bookmark:before {
content: "🔖";
}
.glyphicon-briefcase:before {
content: "💼";
}
.glyphicon-calendar:before {
content: "📅";
}
.glyphicon-camera:before {
content: "📷";
}
.glyphicon-fire:before {
content: "🔥";
}
.glyphicon-lock:before {
content: "🔒";
}
.glyphicon-paperclip:before {
content: "📎";
}
.glyphicon-pushpin:before {
content: "📌";
}
.glyphicon-wrench:before {
content: "🔧";
}
You can also change the escape sequences to workaround this problem, but browser support varies. If you're only targeting Android/BlackBerry, the following should work fine:
.glyphicon-bell:before {
content: "\d83d\dd14";
}
.glyphicon-bookmark:before {
content: "\d83d\dd16";
}
.glyphicon-briefcase:before {
content: "\d83d\dcbc";
}
.glyphicon-calendar:before {
content: "\d83d\dcc5";
}
.glyphicon-camera:before {
content: "\d83d\dcf7";
}
.glyphicon-fire:before {
content: "\d83d\dd25";
}
.glyphicon-lock:before {
content: "\d83d\dd12";
}
.glyphicon-paperclip:before {
content: "\d83d\dcce";
}
.glyphicon-pushpin:before {
content: "\d83d\dccc";
}
.glyphicon-wrench:before {
content: "\d83d\dd27";
}