Glyphicons in Firefox are pixelated

Question

I have integrated bootstrap in my web app. In Firefox, all glyphicons are pixelated in any font size. In Chrome, there are rendered properly. What could be the problem?

Img:

Here is the CSS gathered from inspected in the :before element where the icon is (note some of these may be crossed out, but the copy/paste did not maintain this)

button.table-btn.view::before {
    content: "\e086";
}
button.table-btn::before {
    font-family: 'Glyphicons Halflings',serif;
    font-size: 18px;
    padding: 6px;
}
*::after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button {
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
}
a, a::after, button {
    color: inherit;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}
button, select {
    text-transform: none;
}
button, input, optgroup, select, textarea {
    font: inherit;
    color: inherit;
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    line-height: 1.42857143;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
body {
    color: #666;
    font: 12px/1 Verdana,Geneva,sans-serif;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
html {
    font-size: 10px;
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
}

Hi, did you find a solution to this? – ManInMoon Apr 11 '17 at 12:25 — ManInMoon, Apr 11 '17 at 12:25

score 0 · Answer 1 · answered Jun 15 '16 at 19:37

0

It is not related to CSS. It's probably your browser.

Try to disable or enable hardware acceleration in Firefox.

Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available"

Copied from: https://support.mozilla.org/en-US/questions/943289

answered Jun 15 '16 at 19:37

Programmeur

1,483
4
22
32

No effect. It has to be my css... no one would release these fonts without testing on FF and Chrome, and force the users to disable h/w acceleration . – BarryBones41 Jun 15 '16 at 19:44
Exactly, but your CSS is fine, so it is probably your browser/computer. Do you have the font in your computer? If yes, try to delete or disable it. – Programmeur Jun 15 '16 at 19:46
This is occurring across any PC that accesses the page. I am starting to think, maybe it is because I have attached these to `button:before` elements... maybe the choice of a `button` is wrong (for FF). edit: nope, im wrong. – BarryBones41 Jun 15 '16 at 19:49

score 0 · Answer 2 · answered Jun 15 '16 at 19:39

0

Try to give font-smoothing

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

answered Jun 15 '16 at 19:39

SESN

1,275
13
22

Checkout this stackoverlfow:http://stackoverflow.com/questions/19085942/boootstrap-glyphicons-firefox-issues – SESN Jun 15 '16 at 19:44
Sorry but I don't have any of those problems. My fonts show up but are pixelated. – BarryBones41 Jun 15 '16 at 19:46
can u provide the url – SESN Jun 15 '16 at 19:57
unfortunately not, local server setup – BarryBones41 Jun 15 '16 at 19:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/114781/discussion-between-sesn-and-barrybones41). – SESN Jun 15 '16 at 20:02

Glyphicons in Firefox are pixelated

2 Answers2